问题
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="scripts/responsiveslides.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".rslides").responsiveSlides({
speed: 1000,
maxwidth:1060
});
</script>
<div class="container">
<ul class="rslides">
<li><img src="graphics/img1.png" alt=""></li>
<li><img src="images/img2.png" alt=""></li>
<li><img src="images/img3.png" alt=""></li>
</ul>
</div>
.rslides {
position:relative;
list-style:none;
overflow:hidden;
width:100%;
padding:0;
margin:0;
}
.rslides li {
-moz-border-backface-visibility:hidden;
-o-border-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
border-backface-visibility:hidden;
position:absolute;
display:none;
width:100%;
left:0;
top:0;
}
.rslides li:first-child {
position:relative;
display:block;
float:left;
}
.rslides img {
display:block;
height:auto;
float:left;
width:100%;
border:0;
}
This is a code I exactly copied from website rslides, but somehow it's not running correctly: it only shows the first image.
回答1:
Check that you have added the responsive.min.js correctly
Also initialize the plugin in document.ready function so it loads completely,
$(document).ready(function() {
$(".rslides").responsiveSlides({
speed: 1000,
maxwidth:1060
});
});
I have tried in fiddle and it works.
Fiddle http://jsfiddle.net/pYzfW/
Update Full code
<html>
<head>
<style>
/*! http://responsiveslides.com v1.54 by @viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$.getScript('http://responsiveslides.com/responsiveslides.min.js',function(){
$(".rslides").responsiveSlides({
speed: 1000,
maxwidth:1060
});});
});
</script>
</head>
<body>
<div class="container">
<ul class="rslides">
<li><img src="http://responsiveslides.com/1.jpg" alt=""/></li>
<li><img src="http://responsiveslides.com/2.jpg" alt=""/></li>
<li><img src="http://responsiveslides.com/3.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>
Before check it needs net connection for both js jquery and responsive js
回答2:
You'll need to wrap your responsiveSlides initialization in a jQuery onready callback. Otherwise, that code is being called before the elements exist, so the intialization has no effect.
$(function() {
$(".rslides").responsiveSlides({
speed: 1000,
maxwidth:1060
});
});
来源：https://stackoverflow.com/questions/17191646/my-responsive-slideshow-only-shows-the-first-image