1

スライドを無限にスライドさせる auto_play ループ関数を作成しています。
しかし、変数slidePositionが1に等しい場合、それを検証するif関数がトリガーされないという問題があります。

html

<div class="slide_wrap">
    <div class="slides">
      <ul>
        <li><img src="images/img_01.jpg"/></li>
        <li><img src="images/img_02.jpg"/></li>
        <li><img src="images/img_03.jpg"/></li>
      </ul>
</div></div>

js

$(".slides").bind("auto_play.loop", function(){
if(slidePosition == 1){<br/>
$(this).delay(1000).animate({right:'+='+slideWidth, easing: 'swing'}, 1000);<br/>
slidePosition = 2;<br/>
        }<br/>
        if(slidePosition == 2){<br/>
            $(this).delay(1000).animate({right:'+='+slideWidth, easing: 'swing'}, 1000);<br/>
            slidePosition = 3;<br/>
        }<br/>
        if(slidePosition == 3){<br/>
            $(this).delay(1000).animate({right:'-='+2*slideWidth, easing: 'swing'}, 1000);<br/>
            slidePosition = 1;<br/>
        }<br/>
        trigger("auto_play.loop");<br/>
    }).trigger("auto_play.loop");
4

1 に答える 1

0

あなたの問題は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;  
}
于 2013-01-26T15:53:35.900 に答える