轮播（fade）+左右按钮点击+分页器点击+循环

今天自己写了一个渐隐的轮播效果，记录一下。

轮播包括图片结构、左右按钮结构、分页器结构。

效果图

HTML

<div class="container">
    <div class="wrap">
        <div class="item">
            <img src="images/bnimg01.jpg" />
        </div>
        <div class="item">
            <img src="images/bnimg02.jpg" />
        </div>
        <div class="item">
            <img src="images/bnimg03.jpg" />
        </div>
        <div class="item">
            <img src="images/bnimg04.jpg" />
        </div>
    </div>
    <div class="btn left"><</div>
    <div class="btn right">></div>
    <div class="pagination"></div>
</div>

CSS

*{padding: 0; margin: 0; box-sizing: border-box;}
ul,li{list-style: none;}

.container,.wrap,.item{width: 100%;}

.container{position: relative;}

.item{font-size: 0; display: none;}
.item.on{display: block;}
.item img{width: 100%;}

.btn{position: absolute; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; font-weight: bold; font-size: 24px; top: 50%; margin-top: -20px; cursor: pointer; background: #f00;}
.left{left: 0;}
.left.left_disabled{background:#000; cursor: default;}
.right{right: 0;}
.right.right_disabled{background: #000; cursor: default;}

.pagination{position: absolute; bottom: 20px; width: 100%; height: 24px; line-height: 24px; font-size: 0; text-align: center;}
.pagination span{display: inline-block; font-size: 14px; width: 24px; background: #fff; color: #000; border-radius: 50%;margin: 0 5px; cursor: pointer;}
.pagination span.on{background: #f00; color: #fff; }

JS

var i = 0;
var len = $(".item").length;
$(document).ready(function() {

    /*banner图长度为1时，隐藏左右按钮，大于1时，动态添加分页器*/
    if (len == 1) {
        $(".btn,.pagination").hide()
    } else {
        var str = "";
        for (var x = 0; x < len; x++) {
            str += "<span>" + (x + 1) + "</span>";
        }
        $(".pagination").html(str);
    }
    
    /*默认第一个banner图显示*/
    $(".item").eq(0).addClass("on");
    /*默认第一个分页添加选中状态*/
    $(".pagination span").eq(0).addClass("on");
    
    /*点击左右按钮实现banner图切换效果*/
    $(".btn").click(function() {
        if ($(this).hasClass("left")) {
            leftEvent();
        } else {
            rightEvent();
        }
        $(".item").eq(i).addClass("on").siblings().removeClass("on");
        $(".pagination span").eq(i).addClass("on").siblings().removeClass("on");
    })
    
    /*点击分页器实现切换效果*/
    $(".pagination span").click(function() {
        var _index = $(this).index();
        if (i == _index) {
            return;
        } else {
            i = _index;
            $(".item").eq(i).addClass("on").siblings().removeClass("on");
            $(this).addClass("on").siblings().removeClass("on");
        }
    })

})

/*向左切换方法*/
function leftEvent() {
    i--;
    if (i < 0) {
        i = len - 1;
    }
}

/*向右切换方法*/
function rightEvent() {
    i++;
    if (i > len - 1) {
        i = 0;
    }
}

/*banner图不循环式给左右按钮添加的禁用样式方法*/
function btnDisabled() {

    if (i == 0) {
        $(".left").addClass("left_disabled");
    } else {
        $(".left").removeClass("left_disabled");
    }
    if (i == (len - 1)) {
        $(".right").addClass("right_disabled");
    } else {
        $(".right").removeClass("right_disabled");

    }
}