JQ_图片轮播

上次PO了一个Javascript实现的图片轮播。即使做了函数封装，代码量还是有点冗余。复用率还是不够高。

下面用JQ实现一下图片轮播

html:

<div class="content">
        <div class="img_change">

            <div id="img_container" class="img_container"></div>
            
            <div class="change_btn">
                <ul id="btn_container"></ul>
            </div>            
        </div>
    </div>

css代码：

*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
.content{
    width: 700px;
    margin:100px auto;
}
.img_change{
    position: relative;
    width: 731px;
}
.img_container{
    width: 731px;
    height: 300px;
}
.img_container img{
    position: absolute;
}
.change_btn{
    margin: 0 auto;
    padding: 10px;
    background: rgba(0,0,0,0.4);
}
.change_btn ul{
    list-style: none;
    text-align: center;
}
.change_btn>ul>li{
    display: inline-block;
    width:25px;
    height: 10px;
    background: #1e443f;
    cursor: pointer;
    opacity: 0.8;
    margin-right: 10px;
}
.active{
    background: #d7d7d7 !important;
}

jq代码：

$(function(){
    imgArr = ['banner-1.png','banner-2.png','banner-3.png'];

    initData();

    startChange();

    $("#btn_container li").bind("click",clickBtn)
})

//初始化
function initData(){
    var len = imgArr.length;

    for(var i=0;i<len;i++){
        
        $("#img_container").append("<img src='./images/"+imgArr[i]+"'>");
        $("#btn_container").append("<li data-index='"+i+"'></li>");
    }

    $("#img_container img:not(:first)").hide();
    $("#btn_container li:first").addClass("active");
}

//轮播图片
var timer = null;
var cur = 0;
function startChange(time){
    clearInterval(timer);
    var speedTime = time || 4000;

    timer = setInterval(function(){
        var next = cur+1 == imgArr.length ? 0:cur+1;

        changeImg(cur,next);

        cur = next;

    },speedTime)
}

//鼠标点击触发函数
function clickBtn(){
    clearInterval(timer);
    var that = $(this);
    var next = parseInt(that.attr("data-index"));

    changeImg(cur,next);
    startChange();
    
    cur = next;
}

//改变显示的内容
function changeImg(cur,next){
    $("#img_container img").eq(cur).fadeOut("2000");
    $("#btn_container li").eq(cur).removeClass("active");

    $("#img_container img").eq(next).fadeIn("2000");
    $("#btn_container li").eq(next).addClass("active");
}

效果和JS实现的效果大同小异（下面是JS的图片轮播）

http://www.cnblogs.com/adelina-blog/p/5885130.html

就不PO图片上来了

以上内容，如有错误请指出，不甚感激。