jQuery插件之路(二)——轮播

还记得以前刚接触前端的时候，浏览各大网站，很多都少不了的有个轮播的效果，那个时候自己是一个彻彻底底的小白，想着这些图片滚动起来还真是有意思，是什么让这些图片在一个方向上连续的滚动呢。后来慢慢的接触多了，觉得这些也是so easy的嘛，于是为了加深对js、jQuery的理解以及探究网站上各种效果的实现方法，就有了jQuery插件之路这样一个系列，当然为了纪念当初对轮播的执念，于是就从轮播开始写了一个小小的插件，这只是一个开始，随着后面的了解的更多，也会写一些更加绚丽的DEMO。源代码在这里：点我获取代码，有兴趣的朋友可以去看下吧。好了废话不多说了，下面附上代码。

HTML部分：

 

    <div class="slider">
        <div class="ul-box">
            <ul>
                <li><a href="javascript:;"><img src="img/1.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/2.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/3.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/4.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/5.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/6.jpg"/></a></li>
            </ul>
        </div>
        <div class="mask"></div>
        <div class="prev"><img src="img/btn_l.png"/></div>
        <div class="next"><img src="img/btn_r.png"/></div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/slider.js"></script>
    <script>
        $('.slider').slider({
            width : 640,  
            height : 270,   
            during : 2000, //动画执行间隔
            speed : 500,   //动画速度
            btnSize : 20,  //底部遮罩层的按钮大小
            btnSpace : 10, //底部的按钮间隙
            direction : 1  //轮播方向默认为1，图片向左移动
        });
    </script>

 

CSS部分：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.slider{
    position: relative;
    overflow: hidden;
}
.slider ul{
    list-style: none;
    float: left;
}
.slider ul li{
    float: left;
}
.slider .mask{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
}
.slider .mask .sliderBtn{
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    background: radial-gradient(white 20%, transparent 50%);
}
.slider .prev, .slider .next{
    position: absolute;
    width: 45px; 
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    cursor: pointer;
    top: 0;
    display: none;
}
.slider .prev{
    left: 0;
}
.slider .next{
    right: 0;
}
.slider .prev img, .slider .next img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -22.5px;
    margin-left: -22.5px;
}

View Code