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 语句。在每个内部，您都需要调用 else if，否则将设置幻灯片编号并运行下一个 if 语句。

在查看代码后，我了解您尝试完成的工作采用了您的方法并对其进行了一些清理。我没有调用 jquery 触发器，而是将它们移到方法调用中。现在在每个动画完成后，它会调用 Update 函数来获取序列中的下一个动画，更加简洁和易于维护。

还有一些事情需要清理。比如让它需要无限数量的幻灯片。现在它的硬编码只做三个。虽然这样可行，但最好将计数抽象出来，让它读取 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 回答