自定义jQuery滑块，返回第一张幻灯片

我正在通过构建带有3张幻灯片的简单滑块来练习我的jQuery技能。有一个名为滑块包装的外层包装，其设置宽度为1400px，高度为350px。自定义jQuery滑块，返回第一张幻灯片

在这个包装内部是一个无序列表，其项目向左浮动，以便它们以水平线显示。然后将整个无序列表动画化，向左移动1400px，从而进行滑动。我正在努力弄清楚如何返回到第一张幻灯片，而没有看起来很糟糕。这里是我的html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <script type="text/javascript" src="jquery-1.11.1.js"></script> 
    <script type="text/javascript" src="slider.js"></script> 
     <style> 
      * { margin: 0; padding: 0; } 
      #sliderwrapper { width: 1400px; height: 350px; overflow: hidden; position:relative;} 
      #sliderlist { list-style: none; left: 0px; position:absolute; width:200000em;} 
      .item { float: left; } 

     </style> 
    </head> 


<body> 

    <div id="sliderwrapper"> 

     <ul id="sliderlist"> 
      <li class="item 1"> 
       <div><img src="img1.png" /></div> 
      </li> 
      <li class="item 2"> 
       <div><img src="img2.png" /></div> 
      </li> 
      <li class="item 3"> 
       <div><img src="img3.png" /></div> 
      </li> 
     </ul> 

    </div> 

</body> 
</html>

这里是我的jQuery：

$(document).ready(function() { 


    setInterval(slide, 1000); 

    function slide() { 

     var left = $('#sliderlist').css('left'); 
     left = left.substring(0, left.length - 2); 
     if (left <= -2800) { 

      /*var slide = $('#sliderlist li:first'); 
      $('#sliderlist').children('li:first').remove(); 
      $('#sliderlist').append(slide);*/ 

      $('#sliderlist').css('left', '0px'); 
      $('#sliderlist').animate({ left: "-=1400" }, "slow", "swing"); 
     } 
     else { 
      $('#sliderlist').animate({ left: "-=1400" }, "slow", "swing"); 


     } 
    } 

});

每1秒的幻灯片功能，动画列表的左侧，被调用。一旦显示最后一张幻灯片（在-2800px），第一张幻灯片需要再次显示，但是我希望它与其他幻灯片一样滑动，而不是仅显示。如果我将left属性设置为0px，那么它就会出现，如果我删除并追加一个常量循环中的项目，那么动画看起来很丑。

来源

2014-09-02 Mikey

你可以创建一个小提琴吗？ – 2014-09-02 07:02:59

http://jsfiddle.net/f6rey710/ – Mikey 2014-09-02 07:27:41

正如你可以看到第一个红色幻灯片刚刚出现而不是滑入，我试图找到一种方式让它滑动，所以滑动看起来不变 – Mikey 2014-09-02 07:28:39

我设法找到一个解决办法，那就是：

http://jsfiddle.net/f6rey710/1/

function slide() { 

     var left = $('#sliderList').css('left'); 
     left = left.substring(0, left.length - 2); 
     if (left <= -800) { 


      $('#sliderList').css('left', '-400px'); 
      var slide = $('#sliderList li:first'); 
      $('#sliderList').children('li:first').remove(); 
      $('#sliderList').append(slide); 
      $('#sliderList').animate({ left: "-=400px" }, "slow", "swing"); 

     } 
     else { 
      $('#sliderList').animate({ left: "-=400" }, "slow", "swing"); 
     } 
    }

一旦滑动功能已达到列表中的列表元素的结束必须的前面取出排队并添加到最后。

来源

2014-09-02 11:35:21 Mikey

当您使用动画滑动您的幻灯片时，使用某些动画将动画重新设置为0会怎样？例如

if (left <= -800) { 
    $('#sliderlist').animate({ 
     left: "0px" 
    }, "slow", "swing"); 
} else { 
    $('#sliderlist').animate({ 
     left: "-=400" 
    }, "slow", "swing"); 
}

动画从最后一张幻灯片与一些动画的第一张幻灯片，它看起来正常的，这是许多jQuery的滑块工作的方式。

来源

2014-09-02 07:33:53

我确实尝试过，看起来相当不错，但我试图看看是否有可能不必滑过所有其他幻灯片以回到第一个幻灯片 – Mikey 2014-09-02 07:37:06

自定义jQuery滑块，返回第一张幻灯片

回答

相关问题