小さなプロジェクト用の簡単なスライドショーを非常に高速に作成しましたが、画像をインラインに保つことができません。これが私のコードとフィドルです: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/
お気づきのとおり、機能しますが、次の画像がスライドすると、現在の画像の下にスライドし、その後正しい位置にポップアップ表示されます。何が間違っているのかわからない。どんな助けでも素晴らしいでしょう。