jQuery 仿寫京東輪播廣告圖

基本樣式：

HTML代碼：

<div class="container">
    <div class="list">
        <!--輪播廣告圖-->
        <ul class="listImg clearfix" >
            <li><a href="#"><img src="img/6.jpg" alt="圖片六"></a></li>
            <li><a href="#"><img src="img/1.jpg" alt="圖片一"></a></li>
            <li><a href="#"><img src="img/2.jpg" alt="圖片二"></a></li>
            <li><a href="#"><img src="img/3.jpg" alt="圖片三"></a></li>
            <li><a href="#"><img src="img/4.jpg" alt="圖片四"></a></li>
            <li><a href="#"><img src="img/5.jpg" alt="圖片五"></a></li>
            <li><a href="#"><img src="img/6.jpg" alt="圖片六"></a></li>
            <li><a href="#"><img src="img/1.jpg" alt="圖片一"></a></li>
        </ul>
        <!--中間的6個(gè)小按鈕-->
        <ul class="buttons clearfix">
            <li class="active"><span index="1"></span></li>
            <li><span index="2"></span></li>
            <li><span index="3"></span></li>
            <li><span index="4"></span></li>
            <li><span index="5"></span></li>
            <li><span index="6"></span></li>
        </ul>
        <!--左右點(diǎn)擊按鈕-->
        <a href="#" class="arrow" id="prev">&lt;</a>
        <a href="#" class="arrow" id="next">&gt;</a>
    </div>
</div>

CSS代碼：

*{margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
.clearfix{zoom:1;}
.clearfix:after{display:block; content:''; clear: both;}
.container{position:relative; width:790px; height:340px; margin:100px auto; overflow:hidden;}
.listImg{position:absolute; width:6320px; height:340px;}
.listImg li{float:left;}
.listImg li a img{width:100%;}
/*箭頭樣式*/
.arrow{ width:30px; height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,.3); color:#fff; font-size: 2em;
        z-index:100; cursor:pointer; position:absolute; top:40%; display:none;
}
.arrow:hover{background:rgba(0,0,0,0.6);}
#prev{left:20px;}
#next{right:20px;}
.container:hover .arrow{display:block;} /*鼠標(biāo)進(jìn)入輪播圖才顯示兩個(gè)按鈕*/
/*小按鈕樣式*/
.buttons{position:absolute; bottom:20px; left:45%; z-index:100;}
.buttons li{float:left; margin-right:10px;}
.buttons li span{display:block; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer;}
.buttons li.active span{background:#f00;}

第一步：點(diǎn)擊左右箭頭實(shí)現(xiàn)圖片左右滾動(dòng)

每張圖片的寬度是790px，點(diǎn)擊左箭頭時(shí)，圖片向左移動(dòng)，.listImg的left值會(huì)減790px；點(diǎn)擊右箭頭時(shí)，圖片向右移動(dòng)，.listImg的left值會(huì)加790px

//點(diǎn)擊左箭頭
$('#prev').click(function(e){
    e.preventDefault();
    var left = parseInt($('.listImg').css('left'))-790;
    console.log(left);
    $('.listImg').css('left', left);
});
//點(diǎn)擊右箭頭
$('#next').click(function(e){
    e.preventDefault();
    var left = parseInt($('.listImg').css('left'))+790;
    console.log(left);
    $('.listImg').css('left', left);
});

以上代碼的重復(fù)量還是比較大的，點(diǎn)擊左右兩個(gè)箭頭，一個(gè)是加790，一個(gè)是減790，所以，可以封裝一個(gè)函數(shù)

//點(diǎn)擊左箭頭
$('#prev').click(function(e){
    e.preventDefault();
    play(-790);
});
//點(diǎn)擊右箭頭
$('#next').click(function(e){
    e.preventDefault();
    play(790);
});

function play(offset){
    var left = parseInt($('.listImg').css('left'))+offset;
    console.log(left);
    $('.listImg').css('left', left);
}

效果：

第二步：點(diǎn)擊左右箭頭無限滾動(dòng)

從上例中可以看到，當(dāng) left值等于 -790px時(shí)，顯示第1張圖片，left值為0時(shí)，圖片列表加載到第1張圖片的附屬圖（圖六“每滿1000，立減100”），再次點(diǎn)擊，left變成790px 同時(shí)沒有圖片顯示，所以，當(dāng)left大于 -790px時(shí)，要把left值變?yōu)?4740px，讓圖片跳到第6張

當(dāng)left值等于-4740px時(shí)，圖片加載到第6張圖，當(dāng)left值小于-4740px 時(shí)，圖片列表加載到第6張圖片的附屬圖（圖一“30天包退，180天包換”），之后就出現(xiàn)了空白，不顯示廣告圖。所以，當(dāng)left值小于-4740px時(shí)，要把left值變成-790px，讓圖片跳到第1張

//點(diǎn)擊左箭頭
$('#prev').click(function(e){
    e.preventDefault();
    play(-790);
});
//點(diǎn)擊右箭頭
$('#next').click(function(e){
    e.preventDefault();
    play(790);
});

function play(offset){
    var lists = $('.listImg');
    var left = parseInt(lists.css('left'))+offset;
    lists.css('left', left);
    //當(dāng)left值等于-790時(shí)，顯示的是第一張圖，點(diǎn)右箭頭，圖片右移
    //再次點(diǎn)擊時(shí)，圖片加載到第一張圖的附屬圖（圖6），再點(diǎn)就露白了
    // 所以left大于-790時(shí)，讓left變成-4740（跳到第6張圖）
    if(left>-790){
        lists.css('left',-4740);
    //當(dāng)left值等于-4740時(shí)，顯示的是第六張圖，點(diǎn)擊左箭頭，圖片左移
    //再次點(diǎn)擊時(shí)，圖片加載到第六張圖的附屬圖（圖一），再點(diǎn)就露白了
    //所以left小于-4740時(shí)，讓left變成-790（跳到第1張圖）
    }else if(left<-4740){
        lists.css('left',-790);
    }
}

效果：

第三步：圖片滾動(dòng)時(shí)，激活對(duì)應(yīng)的小圓點(diǎn)

獲取所有的小圓點(diǎn)數(shù)組，點(diǎn)擊箭頭時(shí)，讓數(shù)組加1或減1，對(duì)應(yīng)的小圓點(diǎn)加上active 這個(gè)class

var lists = $('.listImg');
//當(dāng)前播放的是哪張圖片對(duì)應(yīng)的小圓點(diǎn)
var index =1;
//獲取所有的小圓點(diǎn)
var btns = $('.buttons li');

//“激活”對(duì)應(yīng)的小圓點(diǎn)
function showButton(){
    //btns的下標(biāo)從0開始,index從1到6，共6個(gè)小圓點(diǎn)，實(shí)際的圖片下標(biāo)是index-1
    btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');
}

//點(diǎn)擊左箭頭
$('#prev').click(function(e){
    e.preventDefault();
    //向左時(shí)，index減1
    index-=1;
    showButton();
    play(-790);
});
//點(diǎn)擊右箭頭
$('#next').click(function(e){
    e.preventDefault();
    //向右時(shí)，index加1
    index+=1;
    showButton();
    play(790);
});

效果：

上圖中有一個(gè)問題，當(dāng)點(diǎn)擊箭頭超過數(shù)組最大下標(biāo)時(shí)，就沒有小圓點(diǎn)變紅了，而數(shù)組最大下標(biāo)是5。所以，在點(diǎn)箭頭的時(shí)候需要對(duì)下標(biāo)做一個(gè)判斷，index=6，就讓index=1；index=1，就讓index=6 （數(shù)組的index是0到5，小圓點(diǎn)的index是1到6，數(shù)組的index=小圓點(diǎn)index-1）

//點(diǎn)擊左箭頭
$('#prev').click(function(e){
    e.preventDefault();

    //index=1，就讓index=6，否則加1
    index==1?index=6:(index-=1);
    showButton();
    play(-790);
});
//點(diǎn)擊右箭頭
$('#next').click(function(e){
    e.preventDefault();

    //index=6，就讓index=1，否則減1
    index==6?index=1:(index+=1);
    showButton();
    play(790);
});

效果：

第四步：點(diǎn)擊小圓點(diǎn)，切換對(duì)應(yīng)的廣告圖

圖片之所以能滾動(dòng)，最主要是play方法中的 offset參數(shù)起了作用，右向滾動(dòng)一張，則left值加上790px，因此，滾動(dòng)三張，left值加上790px *3，反之亦然

同樣的道理，當(dāng)小圓點(diǎn)默認(rèn)在第一個(gè)時(shí)，點(diǎn)擊第3個(gè)小圓點(diǎn)時(shí)，要跳到第三張圖片，left值就是（3-1）*790，即 (targetIndex - index)*790 （targetIndex：要點(diǎn)擊哪個(gè)小圓點(diǎn)，index：當(dāng)前的小圓點(diǎn)）

//點(diǎn)擊小圓點(diǎn)，切換圖片
btns.click(function(){
    //獲取被點(diǎn)擊的小圓點(diǎn)的自定義屬性index的值
    var targetIndex = parseInt($(this).children().attr('index'));
    console.log(targetIndex);
    //定義圖片的偏移量
    var offset = -790 * (targetIndex - index);

    play(offset);
    //更新當(dāng)前的index
    index = targetIndex;
    showButton();
});

效果：

上圖中，當(dāng)重復(fù)點(diǎn)一個(gè)小圓點(diǎn)的時(shí)候，程序還在不斷的獲取自定義的index值，也就是說還在不斷的去執(zhí)行play方法，這個(gè)是完全沒有必要的。

這里可以做一個(gè)判斷

//點(diǎn)擊小圓點(diǎn)，切換圖片
btns.click(function(){
    //如果被點(diǎn)擊的小圓點(diǎn)已經(jīng)是被選中了的那一個(gè)（簡單說就是重復(fù)點(diǎn)一個(gè)小圓點(diǎn)）
    // 而被選中的小圓點(diǎn)都會(huì)加上一個(gè)active
    if($(this).hasClass('active')){
        return; //直接退出點(diǎn)擊事件的方法
    }
    //獲取被點(diǎn)擊的小圓點(diǎn)的自定義屬性index的值
    var targetIndex = parseInt($(this).children().attr('index'));
    console.log(targetIndex);
    //定義圖片的偏移量
    var offset = -790 * (targetIndex - index);

    play(offset);
    //更新當(dāng)前的index
    index = targetIndex;
    showButton();
});

效果：（反復(fù)點(diǎn)的時(shí)候，不再獲取index為4的值，即不再重復(fù)執(zhí)行其它方法）

第五步：添加動(dòng)畫，自動(dòng)播放

頁面一加載完成，圖片就自動(dòng)向左滑動(dòng)，而向左滑動(dòng)這個(gè)是可以通過點(diǎn)擊右箭頭實(shí)現(xiàn)的，所以我們需要定義一個(gè)啟動(dòng)方法，在方法里面為右箭頭匹配點(diǎn)擊事件，并觸發(fā)play方法播放動(dòng)畫

//間隔時(shí)間，多少毫秒播一次
var interval = 3000;

var timer;

//啟動(dòng)動(dòng)畫
function start() {
    timer = setInterval(function () {
        $('#next').trigger('click');
        play();
    }, interval);
}

start();

效果：

第六步：停止動(dòng)畫

當(dāng)鼠標(biāo)進(jìn)入廣告圖或者是點(diǎn)擊左右箭頭、小圓點(diǎn)的時(shí)候，動(dòng)畫就應(yīng)該終止

//停止動(dòng)畫
function stop() {
    clearTimeout(timer);
}

$('.container').hover(stop, start); //鼠標(biāo)移入停止，移出啟動(dòng)

//點(diǎn)擊左箭頭
$('#prev').click(function(e){
    e.preventDefault();
    //終止動(dòng)畫
    if(lists.is(':animated')){
        return;
    }

    //index=1，就讓index=6，否則加1
    index==1?index=6:(index-=1);
    showButton();
    play(-790);
});

//點(diǎn)擊右箭頭
$('#next').click(function(e){
    e.preventDefault();
    //終止動(dòng)畫
    if(lists.is(':animated')){
        return;
    }

    //index=6，就讓index=1，否則減1
    index==6?index=1:(index+=1);
    showButton();
    play(790);
});

//點(diǎn)擊小圓點(diǎn)，切換圖片
btns.click(function(){
    //如果被點(diǎn)擊的小圓點(diǎn)已經(jīng)是被選中了的那一個(gè)（簡單說就是重復(fù)點(diǎn)一個(gè)小圓點(diǎn)）
    // 而被選中的小圓點(diǎn)都會(huì)加上一個(gè)active
    if($(this).hasClass('active') || lists.is(':animated')){
        return; //直接退出點(diǎn)擊事件的方法
    }
    //獲取被點(diǎn)擊的小圓點(diǎn)的自定義屬性index的值
    var targetIndex = parseInt($(this).children().attr('index'));
    //定義圖片的偏移量
    var offset = -790 * (targetIndex - index);

    play(offset);
    //更新當(dāng)前的index
    index = targetIndex;
    showButton();
});

效果：

當(dāng)然，圖片滑動(dòng)的時(shí)候，最好是能用上animate事件，有一個(gè)動(dòng)畫的效果，而不是直接的切換某一張圖片到哪個(gè)位置上。

代碼匯總：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0; padding:0;}
        ul{list-style:none;}
        a{text-decoration:none;}
        .clearfix{zoom:1;}
        .clearfix:after{display:block; content:''; clear: both;}
        .container{position:relative; width:790px; height:340px; margin:100px auto; overflow:hidden;}
        .listImg{position:absolute; width:6320px; height:340px;}
        .listImg li{float:left;}
        .listImg li a img{width:100%;}
        /*箭頭樣式*/
        .arrow{ width:30px; height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,.3); color:#fff; font-size: 2em;
                z-index:100; cursor:pointer; position:absolute; top:40%; display:none;
        }
        .arrow:hover{background:rgba(0,0,0,0.6);}
        #prev{left:20px;}
        #next{right:20px;}
        .container:hover .arrow{display:block;} /*鼠標(biāo)進(jìn)入輪播圖才顯示兩個(gè)按鈕*/
        /*小按鈕樣式*/
        .buttons{position:absolute; bottom:20px; left:45%; z-index:100;}
        .buttons li{float:left; margin-right:10px;}
        .buttons li span{display:block; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer;}
        .buttons li.active span{background:#f00;}
    </style>
</head>
<body>
<div class="container">
    <div class="list">
        <!--輪播廣告圖-->
        <ul class="listImg clearfix" >
            <li><a href="#"><img src="img/6.jpg" alt="圖片六"></a></li>
            <li><a href="#"><img src="img/1.jpg" alt="圖片一"></a></li>
            <li><a href="#"><img src="img/2.jpg" alt="圖片二"></a></li>
            <li><a href="#"><img src="img/3.jpg" alt="圖片三"></a></li>
            <li><a href="#"><img src="img/4.jpg" alt="圖片四"></a></li>
            <li><a href="#"><img src="img/5.jpg" alt="圖片五"></a></li>
            <li><a href="#"><img src="img/6.jpg" alt="圖片六"></a></li>
            <li><a href="#"><img src="img/1.jpg" alt="圖片一"></a></li>
        </ul>
        <!--中間的6個(gè)小按鈕-->
        <ul class="buttons clearfix">
            <li class="active"><span index="1"></span></li>
            <li><span index="2"></span></li>
            <li><span index="3"></span></li>
            <li><span index="4"></span></li>
            <li><span index="5"></span></li>
            <li><span index="6"></span></li>
        </ul>
        <!--左右點(diǎn)擊按鈕-->
        <a href="#" class="arrow" id="prev">&lt;</a>
        <a href="#" class="arrow" id="next">&gt;</a>
    </div>
</div>

<script src="dist/jquery-1.8.3.min.js"></script>
<script>
    var lists = $('.listImg');

    //獲取所有的小圓點(diǎn)
    var btns = $('.buttons li');

    //當(dāng)前播放的是哪張圖片對(duì)應(yīng)的小圓點(diǎn)
    var index =1;

    //廣告圖片的張數(shù)
    var len = 6;

    //間隔時(shí)間，多少毫秒播一次
    var interval = 3000;

    var timer;


    //滾動(dòng)圖片
    function play(offset){

        var left = parseInt(lists.css('left'))+offset;

        if (offset>0) {
            offset = '+=' + offset;
        }
        else {
            offset = '-=' + Math.abs(offset);
        }

        lists.animate({'left':offset},500,function(){
            if(left>-790){
                lists.css('left', -790*len);
            }else if(left< -790*len ){
                lists.css('left', -790);
            }
        })


    }
    //啟動(dòng)動(dòng)畫
    function start() {
        timer = setInterval(function () {
            $('#next').trigger('click');
            play();
        }, interval);
    }

    //停止動(dòng)畫
    function stop() {
        clearTimeout(timer);
    }

    //點(diǎn)擊左箭頭
    $('#prev').click(function(e){
        e.preventDefault();

        if(lists.is(':animated')){
            return;
        }

        //index=1，就讓index=6，否則加1
        index==1?index=len:(index-=1);
        showButton();
        play(-790);
    });

    //點(diǎn)擊右箭頭
    $('#next').click(function(e){
        e.preventDefault();

        if(lists.is(':animated')){
            return;
        }

        //index=6，就讓index=1，否則減1
        index==len?index=1:(index+=1);
        showButton();
        play(790);
    });

    //“激活”對(duì)應(yīng)的小圓點(diǎn)
    function showButton(){
        //btns的下標(biāo)從0開始,index從1到6，共6個(gè)小圓點(diǎn)，實(shí)際的圖片下標(biāo)是index-1
        btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');
    }

    //點(diǎn)擊小圓點(diǎn)，切換圖片
    btns.click(function(){
        //如果被點(diǎn)擊的小圓點(diǎn)已經(jīng)是被選中了的那一個(gè)（簡單說就是重復(fù)點(diǎn)一個(gè)小圓點(diǎn)）
        // 而被選中的小圓點(diǎn)都會(huì)加上一個(gè)active
        if($(this).hasClass('active') || lists.is(':animated')){
            return; //直接退出點(diǎn)擊事件的方法
        }
        //獲取被點(diǎn)擊的小圓點(diǎn)的自定義屬性index的值
        var targetIndex = parseInt($(this).children().attr('index'));
        //定義圖片的偏移量
        var offset = -790 * (targetIndex - index);

        play(offset);
        //更新當(dāng)前的index
        index = targetIndex;
        showButton();
    });

    $('.container').hover(stop, start); //鼠標(biāo)移入停止，移出啟動(dòng)

    start();


</script>
</body>
</html>

以上僅僅是閑來無事整理的一個(gè)小demo，實(shí)際使用中，也可以使用類似 Swiper、Hammer等優(yōu)秀的插件