jQuery实现轮播器图片过渡

我的思路是这样的:把第一张图片复制到最后一张的后面,轮播到最后一张时(也就是第一张显示的图片)把left值改为0,然后继续轮播。

代码如下:(html和css部分就不打出来了)

$(function(){

  var oUl=$('#picList');  

  var aLi=$('#picList li');  //图片集合

  var index=0;

  function autoshow(){

    index++;

    if(index>=aLi.length){            //如果index大于等于图片的数目,把left值改为0并且index指向1,这样再轮播的时候会播第二张图片

      oUl.css('left','0px');

      index=1;

    }

    oUl.animate({left:"-"+index*1000+"px"},1000);

  }

  var timer=setInterval(autoshow,3000);

});

本人学习js没多久,之前一直在想着过渡的问题,在网上看到的都是说不清楚(可能因为我不会找),所以把过渡效果做出来后分享给大家。

posted @ 2015-11-17 22:13  期待我的未来  阅读(907)  评论(0)    收藏  举报