Question

我正在创建一个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");

Answer 1

好吧我认为你的问题是你的if语句。在每个内部你需要调用，否则如果，否则将设置slidenumber并运行下一个if语句。

在查看代码之后，我了解您尝试完成的内容，并采取了一些措施并将其清理干净。我没有调用jquery触发器，而是调用了方法调用。现在每个动画完成后，它将调用Update函数来获取序列中的下一个动画，更清晰，更易于维护。

还有一些事情需要清理干净。比如让它需要无限量的幻灯片。现在它的硬编码只做三个。虽然这样可行，但最好抽出计数，并让它读取dom并以此方式计算。

您可以在jsFiddle here

上查看解决方案

<强>更新修改了javascript以获取无限量的幻灯片。我建议你使用这种方法，这样你就可以继续添加幻灯片，而不会触及一大堆javascript。

Updated Fiddle

使用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;  
}

自定义Jquery幻灯片不会移动到正确的幻灯片

1 个答案: