左右水平轮播，渐变轮播

左右水平轮播

CSS部分

先写出html结构,原则上是尽量少的标签就能达到功能

    

        

            
![](http://upload-images.jianshu.io/upload_images/7113407-2822b6ff0ee054f9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            
![](http://upload-images.jianshu.io/upload_images/7113407-0ea8f1080ca906ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            
![](http://upload-images.jianshu.io/upload_images/7113407-f10834a83445c57c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            
![](http://upload-images.jianshu.io/upload_images/7113407-41418e1d0026658d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
        <
        
        

            

            

            

            

        
    

设定CSS样式。想要水平轮播，那么几个li必须是水平布局，可以使用float来进行布局。
使元素进行位移一般有margin，relative以及绝对定位几种方式，要轮播显然使用绝对定位

    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
        box-sizing: border-box;
    }
    a {
        text-decoration: none;
    }
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    /*使元素进行位移一般有margin，relative以及绝对定位几种方式，要轮播显然使用绝对定位*/
    .carousel {
        position: relative;
        width: 400px;
        height: 250px;
        overflow: hidden;

        top: 50px;
        /*设置carousel显露出来的部分水平居中*/
        left: 50%;
        transform: translate(-50%);
    }
    .carousel .img-ct {
        width: 1600px;
        position: absolute;
    }
    .carousel .img-ct img {
        width: 400px;
        height: 250px;
    }
    .carousel .img-ct>li {
        float: left;
    }

    .carousel .arrow {
        position: absolute;
        width: 50px;
        height: 50px;
        border: 1px solid #fff;
        border-radius: 50%;
        top: 50%;
        margin-top: -25px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        font-size: 22px;
    }
    .carousel .arrow:hover {
        background: rgba(0,0,0,0.1);
    }
    .carousel .pre{
        left: 10px;
    }
    .carousel .next {
        right: 10px;
    }

    .carousel .bullet {
        position: absolute;
        width: 100%;
        top: 87%;
        text-align: center;
    }
    .carousel .bullet>li {
        display: inline-block;
        width: 25px;
        height: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
    }
    .carousel .bullet>li.active {
        background: #ccc;
    }

JS部分

轮播的思路大概是：比如说只有3张图片1,2,3那么在1到2到3的过程中，只需要设置上述例子的.img-ct的left属性，使其左右平移，就能达到水平切换的效果。但是在切换到底，即3又要轮播回1的时候，一般来说我们不进行DOM顺序的切换。而是在页面一开始初始化时，就创建头和尾两个元素的备份，头元素进行克隆，然后放到最尾部，尾元素克隆之后放到最前面。即创建头尾备份，头备份放到尾部，尾备份放到头部。这样在切换的时候，尾部要轮播到头部的话，其实是轮播到了头部的备份，这个备份是在最尾部即尾元素的下一个的，所以就不需要转换DOM顺序。然后我们在整体移到真正的元素上。
另外我们还需要知道轮播的元素的个数以及每个元素的宽度（水平轮播）。
总计一下：

• 创建头尾元素的备份，头备份放到最后面，尾备份放到最前面。
• 得到轮播元素的个数和宽度

另外关于jquery的一个特点，jq选择匹配元素只会选择当时定义的元素，如果选择元素在之后的操作中发生变化，当时已经定义的jq元素并不会随着进行动态变化。例如下面的例子使用jq获得了$imgs，然后这个$imgs就一直都是4个元素，就是当时的那4个轮播元素，后面的$('.carousel .img-ct>li')发生了变化，长度增加了，但是当时定义的$imgs不会变化。但是此时再去使用$('.carousel .img-ct>li')就会得到当前的jq对象。

轮播的js代码：

渐变轮播

渐变轮播相对较简单，核心思想是让4个li重叠在一起，可以通过设置position:absolute;达到。然后通过变量监控当前元素的次序，通过fadeIn()和fadeOut()实现效果。

css部分只有.img-ct>li设为position:absolute；改变。

    
    





    

        
![](http://upload-images.jianshu.io/upload_images/7113407-8fb0bf6748ea96ce.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/7113407-c14f4c5e00f198d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/7113407-6eaedb71aecbdeb1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
![](http://upload-images.jianshu.io/upload_images/7113407-799af87ca1adff72.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    <
    >
    

        

        

        

        

    

JS部分先不考虑自动轮播，先进行事件绑定，然后想着先把playPre()和playNext()以及setBullets ()实现，然后设置一个setInterval即可。需要注意的是页面初始化的时候是空白的。写一句$imgs.eq(currentIndex).fadeIn(); 让第一个元素显现出来。优化的时候统一加到play()中即可。