あなたの問題はifステートメントだったと思います。それぞれの内部で and else if を呼び出す必要があります。そうしないと、スライド番号が設定され、次の if ステートメントが実行されます。
コードを確認した後、あなたが達成しようとしていることがあなたのアプローチを取り、それを少しきれいにしたことを理解しています. jquery トリガーを呼び出す代わりに、メソッド呼び出しに移動しました。各アニメーションが完了すると、Update 関数が呼び出され、シーケンス内の次のアニメーションが取得されます。
掃除しなければならないことはまだあります。無限の量のスライドを取るようにするなど。現在、3 つだけを実行するようにハードコーディングされています。それは機能しますが、カウントを抽象化し、dom を読み取ってそのようにカウントを取得することをお勧めします。
こちらのjsFiddleでソリューションを表示できます
更新:
JavaScript を変更して、スライドを無制限に取得できるようにしました。このタイプのアプローチを使用することをお勧めします。これにより、スライドを追加し続け、JavaScript にまったく触れないようにすることができます。
更新されたフィドル
Javascript:
$(document).ready(function()
{
//On page load initialize the slideshow
MyApp.SlideShow.init();
});
//create a namespace for our code
var MyApp = MyApp || {};
//create a function inside a closure to handle all slideshow functions
MyApp.SlideShow = (function ()
{
var slidePosition = 1;
var slideWidth = 100;
var slider = $('.slides');
//called when page is loaded
function init()
{
var v = $('.viewer');
var vtop = v.position().top;
vleft = v.position().left;
//Set the slider to where the view is
slider.css('left', vleft).css('top', vtop);
update();
};
//function to update the slide block
function update()
{
if (slidePosition == 1) {
slider.delay(1000).animate({
left: '-=' + slideWidth,
easing: 'swing'
}, 1000, update);
slidePosition = 2;
}
else if (slidePosition == 2) {
slider.delay(1000).animate({
left: '-='+ slideWidth,
easing: 'swing'
}, 1000, update);
slidePosition = 3;
}
else if (slidePosition == 3) {
slider.delay(1000).animate({
left: '+=' + 2 * slideWidth,
easing: 'swing'
}, 1000, update);
slidePosition = 1;
}
};
return {
init: init
};
}());
HTML:
<div class="slide_wrap">
<div class="slides">
<ul>
<li class="s1">1</li>
<li class="s2">2</li>
<li class="s3">3</li>
</ul>
</div>
</div>
<div class="viewer"></div>
CSS:
.viewer
{
border:5px solid yellow;
height:100px;
width:100px;
position:absolute;
top:100px;
left:300px;
}
.slides li
{
height:100px;
width:100px;
float:left;
}
.slides ul
{
height:100px;
}
.slides
{
position:absolute;
}
.s1
{
background-color:red;
}
.s2
{
background-color:blue;
}
.s3
{
background-color:green;
}