JQ简单实现无缝滚动

Posted 2020-08-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ简单实现无缝滚动相关的知识，希望对你有一定的参考价值。

$(function(){
   $("ul li:lt(5)").clone().appendTo("ul");
   var $width = $("ul li:lt(5)").width() * 4;
   var currIndex = 0;
   $("#next").click(function(){
      if(currIndex == 2){
         currIndex = 0;
         $("ul").css("left",0);
      }
      currIndex++;
      $("ul").stop().animate({left:$width * currIndex * -1},500);
   });
   $("#prev").click(function(){
      if(currIndex == 0){
         currIndex = 2;
         $("ul").css("left",2 * $width * -1);
      }
      currIndex--;
      $("ul").stop().animate({left:$width * currIndex * -1},500);
   });
   $("ul>li").hover(function(){
      $(this).children().eq(1).stop().animate({top:0},400);
   },function(){
      $(this).children().eq(1).stop().animate({top:240},400);
   });
});

以上是关于JQ简单实现无缝滚动的主要内容，如果未能解决你的问题，请参考以下文章