轮播图

1、首先就是布局，我们首先创建一个box相对定位，box中在放一个ul标签要绝对定位。这就是基本的界面搭建，按照下图中将ul标签中的li标签拼接好；

2、搭建完毕后，我们先让它滑动起来。动画算是移动起来了，那我们就加入一个定时器来定时调用迅速动画来实现一下翻书的效果就可以了。

3、实现无缝连接，这个是轮播图的核心。很简单，因为第一张和最后一张是一样一样的！吼~。当我们的ul滑动到最后一张的时候，那我们就迅速将ul的位置回到初始位置。这样就掩人耳目了。

4、核心代码，为了知道滑动到第几个图片，你要用一个索引值来记录当前滑动到第几个图片了。

function autoPlay(){
    pageIndex++;
    if(pageIndex > $('li').length){
        //当滑动到最后一张
        pageIndex = 1;
        showList.css('left',0);//当滑动到最后一张，将ul初始位置
    }
    //继续执行计划
    showList.animation({left:listItemWitdh*pageIndex},speed);
}

第2种方式

1、第一步也是先布局，同样需要一个大盒子box，和一个ul盒子相对定位，li标签绝对定位。注意哦！是ul标签相对定位，li标签绝对定位哦。如下图所示，ul盒子是box的两倍大。

2、接下来就是布局，默认让第一张li展示在box中，其他li标签集体右移到box右边位置。

3、注意听了。这布最重要，否则你就不会了。正常步骤，第一张图移动，第二张图跟着移动，第二张图移动之前，先让它放在第一张图屁股后面。

js code

var autoPaly =  function () {
   //第一张图先移动到左边
    listItems.eq(currentIndex).animate({left:-elemWidth},300);
    ++currentIndex;//索引累加
    if (currentIndex > (listItems.length-1)){
        currentIndex = 0;
    }
    indrectorIndex(currentIndex);
    //现在开始第二张，首先设置left在正确位置，动画是移动到left为0位置
    listItems.eq(currentIndex).css({left:elemWidth}).animate({left:0},300);
}

 

4、会了左边，那右边就好搞了，同理可证