非常快地为一个小项目构建了一个简单的幻灯片放映,但我无法让图像保持内联。这是我的代码和小提琴:HTML
<div id="slides">
<div class="slides_container">
<img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="960" height="392" alt="Slide 1" class="slide" id="firstSlide">
<img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="960" height="392" alt="Slide 2" class="slide" style="display:none;">
<img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="960" height="392" alt="Slide 3" class="slide" style="display:none;">
<img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="960" height="392" alt="Slide 4" class="slide" style="display:none;">
<img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="960" height="392" alt="Slide 5" class="slide" style="display:none;">
<img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="960" height="392" alt="Slide 6" class="slide" style="display:none;">
</div>
</div>
CSS:
.slide{
width:960px;
height:392px;
display:inline;
float:left;
}
JS:
function slideShow() {
var displayToggled = false;
var current1 = $('.slide:visible');
var nextSlide = current1.next('.slide');
var hideoptions = {
"direction": "left",
"mode": "hide"
};
var showoptions = {
"direction": "right",
"mode": "show"
};
if (current1.is(':last-child')) {
current1.effect("slide", hideoptions, 1000);
$("#firstSlide").effect("slide", showoptions, 1000);
}
else {
current1.effect("slide", hideoptions, 1000);
nextSlide.effect("slide", showoptions, 1000);
}
};
setInterval(slideShow, 3000);
slideShow();
小提琴:http: //jsfiddle.net/xYWzU/6/
您会注意到它有效,但是当下一张图片滑过时,它会滑过当前图片的下方,然后弹出到正确的位置。不知道我做错了什么。任何帮助都是极好的。