jQuery 仿寫京東輪播廣告圖

原創 frwupeng517 2018-09-11 02:16

基本樣式：


HTML代碼：

<div class="container">
    <div class="list">
        <!--輪播廣告圖-->
        <ul class="listImg clearfix" style="left:-790px;">
            <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個小按鈕-->
        <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>
        <!--左右點擊按鈕-->
        <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;} /*鼠標進入輪播圖才顯示兩個按鈕*/
/*小按鈕樣式*/
.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;}



第一步：點擊左右箭頭實現圖片左右滾動

每張圖片的寬度是790px，點擊左箭頭時，圖片向左移動，.listImg的left值會減790px；點擊右箭頭時，圖片向右移動，.listImg的left值會加790px

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


以上代碼的重複量還是比較大的，點擊左右兩個箭頭，一個是加790，一個是減790，所以，可以封裝一個函數

//點擊左箭頭
$('#prev').click(function(e){
    e.preventDefault();
    play(-790);
});
//點擊右箭頭
$('#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);
}



效果：

wKioL1hYv72TBPjTABIqn3KmdEU945.gif


第二步：點擊左右箭頭無限滾動


從上例中可以看到，當 left值等於 -790px時，顯示第1張圖片，left值爲0時，圖片列表加載到第1張圖片的附屬圖（圖六“每滿1000，立減100”），再次點擊，left變成790px 同時沒有圖片顯示，所以，當left大於 -790px時，要把left值變爲-4740px，讓圖片跳到第6張


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

//點擊左箭頭
$('#prev').click(function(e){
    e.preventDefault();
    play(-790);
});
//點擊右箭頭
$('#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);
    //當left值等於-790時，顯示的是第一張圖，點右箭頭，圖片右移
    //再次點擊時，圖片加載到第一張圖的附屬圖（圖6），再點就露白了
    // 所以left大於-790時，讓left變成-4740（跳到第6張圖）
    if(left>-790){
        lists.css('left',-4740);
    //當left值等於-4740時，顯示的是第六張圖，點擊左箭頭，圖片左移
    //再次點擊時，圖片加載到第六張圖的附屬圖（圖一），再點就露白了
    //所以left小於-4740時，讓left變成-790（跳到第1張圖）
    }else if(left<-4740){
        lists.css('left',-790);
    }
}


效果：

wKioL1hYxFvBwqN8ABM7IkcRjq8395.gif



第三步：圖片滾動時，激活對應的小圓點


獲取所有的小圓點數組，點擊箭頭時，讓數組加1或減1，對應的小圓點加上active 這個class


var lists = $('.listImg');
//當前播放的是哪張圖片對應的小圓點
var index =1;
//獲取所有的小圓點
var btns = $('.buttons li');

//“激活”對應的小圓點
function showButton(){
    //btns的下標從0開始,index從1到6，共6個小圓點，實際的圖片下標是index-1
    btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');
}

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


效果：

wKiom1hYzwKQ-LP7ABleLP5m7Pc998.gif


上圖中有一個問題，當點擊箭頭超過數組最大下標時，就沒有小圓點變紅了，而數組最大下標是5。所以，在點箭頭的時候需要對下標做一個判斷，index=6，就讓index=1；index=1，就讓index=6 （數組的index是0到5，小圓點的index是1到6，數組的index=小圓點index-1）


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

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

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


效果：

wKiom1hY0zaSDUVkABju1qnD1b8071.gif



第四步：點擊小圓點，切換對應的廣告圖


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


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

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

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


效果：

wKioL1hY2Ybyp8jsAA4wXHejphY708.gif


上圖中，當重複點一個小圓點的時候，程序還在不斷的獲取自定義的index值，也就是說還在不斷的去執行play方法，這個是完全沒有必要的。


這裏可以做一個判斷

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

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


效果：（反覆點的時候，不再獲取index爲4的值，即不再重複執行其它方法）

wKiom1hY253wiV1hAAOQPiX1fsc487.gif



第五步：添加動畫，自動播放


頁面一加載完成，圖片就自動向左滑動，而向左滑動這個是可以通過點擊右箭頭實現的，所以我們需要定義一個啓動方法，在方法裏面爲右箭頭匹配點擊事件，並觸發play方法播放動畫

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

var timer;

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

start();


效果：

wKiom1haFAPzMx2rAAo__cIZHQc626.gif



第六步：停止動畫


當鼠標進入廣告圖或者是點擊左右箭頭、小圓點的時候，動畫就應該終止

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

$('.container').hover(stop, start); //鼠標移入停止，移出啓動

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

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

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

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

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

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


效果：

wKioL1haGVDRhKvIAAq_oSiT4d4109.gif



當然，圖片滑動的時候，最好是能用上animate事件，有一個動畫的效果，而不是直接的切換某一張圖片到哪個位置上。


代碼彙總：

<!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;} /*鼠標進入輪播圖才顯示兩個按鈕*/
        /*小按鈕樣式*/
        .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" style="left:-790px;">
            <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個小按鈕-->
        <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>
        <!--左右點擊按鈕-->
        <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');

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

    //當前播放的是哪張圖片對應的小圓點
    var index =1;

    //廣告圖片的張數
    var len = 6;

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

    var timer;


    //滾動圖片
    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);
            }
        })


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

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

    //點擊左箭頭
    $('#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);
    });

    //點擊右箭頭
    $('#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);
    });

    //“激活”對應的小圓點
    function showButton(){
        //btns的下標從0開始,index從1到6，共6個小圓點，實際的圖片下標是index-1
        btns.eq(index-1).addClass('active').siblings('.active').removeClass('active');
    }

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

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

    $('.container').hover(stop, start); //鼠標移入停止，移出啓動

    start();


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


以上僅僅是閒來無事整理的一個小demo，實際使用中，也可以使用類似 Swiper、Hammer等優秀的插件


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

《空門》

王清甫 2019-02-24 13:32:45

《霧》

王清甫 2019-02-24 13:32:45

grep，sed，awk

曉晶 2019-02-23 13:58:27

linux命令學習記錄一

ssjywlb 2019-02-23 13:58:00

>>>>2007年IT業回顧之哀兵糗事篇：華爲帶頭鑽法律空子<轉>

ahgyyubo 2019-02-23 13:56:41

CCNA實驗二：手動建立靜態路由表

蝸牛001號 2019-02-23 13:53:33

C#實現的18位身份證格式驗證算法

sccdliangl 2019-02-23 13:53:12

安裝mvwareworstation

zhumingqiang 2019-02-23 13:52:48

ShareTech 防火牆 使用手冊(適用型號：LB-2225)

yzy747 2019-02-23 13:50:59

科技部網站是這樣回答無聊問題的....

張富貴 2019-02-23 13:49:41

zabbix3.0安裝

民工騎士 2019-02-23 13:46:35

關於HTML標記的

pengtingwei 2019-02-23 13:42:40

修改收藏夾的默認路徑

zongxn 2019-02-23 13:41:43

第二十二章：動畫（四）

wangccsy 2019-02-24 10:57:10

json

yi_sixian 2019-02-23 14:02:01