jquery實現導航圖輪播

時間 2019-12-04

標籤 jquery 實現導航欄目 JQuery 简体版

原文原文鏈接

下面的幾個栗子是使用jquery實現Banner輪播的效果，直接將代碼貼出來，從最初級沒有任何優化和封裝的寫法，一直到最後一個栗子，一步步進行了優化，加大程序的可複用性，減小代碼冗餘。css

栗子①java

HTML佈局：注：圖片請本身準備，大小爲（W：200px H：200px）jquery

//最外層容器DIV
<div id="wrap">
    //圖片容器UL
    <ul id="imgWrap">
        <li id="one"><img src="img/1.1.jpg" /></li>
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
    </ul>
    //按鈕容器OL
    <ol id="numWrap">
        <li class="color"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    //左右按鈕
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS樣式：注：一些較爲特殊的樣式已經進行說明，請仔細閱讀每個樣式添加的意義函數

* { margin: 0; padding: 0; outline: 0; border: 0;
} li { list-style: none;
} #wrap { width: 200px; height: 200px; margin: 10px auto; overflow: hidden;  /*溢出部分隱藏*/ position: relative;
} #imgWrap { width: 200px;   /*圖片容器固定一張圖片寬高，在JS裏使用代碼進行動態控制具體寬、高*/ height: 200px; position: absolute; top: 0; left: 0; transition: all .8s ease;    /*設置動畫*/
} #imgWrap li { float: left;
} #numWrap { position: absolute; bottom: 10px; right: 10px;
} #numWrap li { width: 10px; height: 10px; background: #ccc; border-radius: 50px; float: left; margin: 5px;
} #numWrap li.color {   /*準備class樣式*/ background: red;
} #left, #right { width: 15px; height: 20px; background: #CCCCCC; position: absolute; top: 40%; display: none;
} #left { left: 10px;
} #right { right: 10px;
} #wrap:hover #left { display: block;
} #wrap:hover #right {   /*鼠標移入顯示左右按鈕*/ display: block;
}

jquery和javascript代碼：注：請在<head>標籤中提早引入jquery文件佈局

$(function() { var index = 0; //將圖片的UL寬度撐大
    $("#imgWrap").css('width', $('#imgWrap li').width() * $("#imgWrap li").length); $("#numWrap li").click(function() { //循環清空
        $("#numWrap li").removeClass("color"); //只給點擊按鈕添加class
        $(this).addClass("color"); //點擊按鈕，顯示對應圖片
        index = $(this).index(); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }); $("#left").click(function() { //下標--，纔會等於-1
        index--; if(index == -1) { index = $('#imgWrap li').length - 1; }; $("#numWrap li").removeClass("color"); $("#numWrap li").eq(index).addClass("color"); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }); $("#right").click(function() { //下標++，纔會等於長度
        index++; if(index == $('#imgWrap li').length) { index = 0; }; $("#numWrap li").removeClass("color"); $("#numWrap li").eq(index).addClass("color"); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }); //開啓定時器
    var timer = setInterval(function() { index++; if(index == -1) { index = $('#imgWrap li').length - 1; } else if(index == $('#imgWrap li').length) { index = 0; }; $("#numWrap li").removeClass("color"); $("#numWrap li").eq(index).addClass("color"); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }, 2000); //鼠標移入、移出關閉、開啓定時器
    $("#wrap").hover(function() { clearInterval(timer); }, function() { timer = setInterval(function() { index++; if(index == -1) { index = $('#imgWrap li').length - 1; } else if(index == $('#imgWrap li').length) { index = 0; }; $("#numWrap li").removeClass("color"); $("#numWrap li").eq(index).addClass("color"); $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }, 2000); }); });

效果圖：優化

栗子② 注：HTML、css佈局及樣式同栗子①動畫

jquery及javascript代碼this

$(function() { var index = 0; //將圖片的UL寬度撐大
    $("#imgWrap").css('width', $('#imgWrap li').width() * $("#imgWrap li").length); //按鈕點擊
    $("#numWrap li").click(function() { index = $(this).index(); next(); }); $("#left").click(function() { //下標--，纔會等於-1
        index--; next(); }); $("#right").click(function() { //下標++，纔會等於長度
        index++; next(); }); //優化成函數，使用時能夠再各處直接調用
    function next() { if(index == -1) { index = $('#imgWrap li').length - 1; } else if(index == $('#imgWrap li').length) { index = 0; }; //循環清空
        $("#numWrap li").removeClass("color"); //只給點擊按鈕添加class
        $("#numWrap li").eq(index).addClass("color"); //點擊按鈕，顯示對應圖片
        $("#imgWrap").css('left', -$('#imgWrap li').width() * index); }; //開啓定時器
    var timer = setInterval(function() { index++; next(); }, 2000); //鼠標移入和移出事件清除、開啓定時器
    $("#wrap").hover(function() { clearInterval(timer); }, function() { //不要寫var，不然會開啓兩次定時器
        timer = setInterval(function() { index++; next(); }, 2000); }); });

栗子②主要是對栗子①進行了優化，將重複性代碼，放到了next函數裏，進行屢次調用，程序獲得大幅度代碼的優化，提升了程序的可複用性。下面咱們進行函數的封裝，封裝好的函數能夠的到最大程度的可複用性，相同功能，只需調用相應函數，傳入不一樣參數便可完成，不須要再從新編寫相同功能的程序，怎麼樣，似不似很期待，^_^spa

栗子③

HTML代碼：

<div class="wrap" id="wrap1">
    <ul class="imgWrap" id="imgWrap1">
        <li class="one"><img src="img/1.1.jpg" /></li>
        <li><img src="img/1.2.jpg" /></li>
        <li><img src="img/1.3.jpg" /></li>
        <li><img src="img/1.4.jpg" /></li>
    </ul>
    <ol class="numWrap" id="numWrap1">
        <li class="color"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="left" id="left1"></div>
    <div class="right" id="right1"></div>
</div>

<div class="wrap" id="wrap2">
    <ul class="imgWrap" id="imgWrap2">
        <li class="one"><img src="img/1.1.jpg" /></li>
        <li><img src="img/1.2.jpg" /></li>
        <li><img src="img/1.3.jpg" /></li>
        <li><img src="img/1.4.jpg" /></li>
    </ul>
    <ol class="numWrap" id="numWrap2">
        <li class="color"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="left" id="left2"></div>
    <div class="right" id="right2"></div>
</div>

這個佈局裏寫了兩個要進行輪播的導航，目的是展現程序的可重複使用性

css代碼：

* { margin: 0; padding: 0; outline: 0; border: 0;
} li { list-style: none;
} .wrap { width: 200px; height: 200px; margin: 10px auto; overflow: hidden; position: relative;
} .imgWrap { width: 200px; height: 200px; position: absolute; top: 0; left: 0; transition: all .8s ease;
} .imgWrap li { float: left;
} .numWrap { position: absolute; bottom: 10px; right: 10px;
} .numWrap li { width: 10px; height: 10px; background: #ccc; border-radius: 50px; float: left; margin: 5px;
} .numWrap li.color { background: red;
} .left, .right { width: 15px; height: 20px; background: #CCCCCC; position: absolute; top: 40%; display: none;
} .left { left: 10px;
} .right { right: 10px;
} .wrap:hover .left { display: block;
} .wrap:hover .right { display: block;
}

jquery和javascript代碼：

$(function() { //調用
    Tab($("#wrap1"),$("#imgWrap1"),$('#imgWrap1 li'),$("#numWrap1 li"),$("#left1"),$("#right1")); Tab($("#wrap2"),$("#imgWrap2"),$('#imgWrap2 li'),$("#numWrap2 li"),$("#left2"),$("#right2")); }); //封裝成函數 //$("#wrap"),$("#imgWrap"),$('#imgWrap li'),$("#numWrap li"),$("#left"),$("#right")
function Tab(wrap,imgWrap,imgLi,numLi,left,right) { var index = 0; //將圖片的UL寬度撐大
    imgWrap.css('width', imgLi.width() * imgLi.length); //按鈕點擊
    numLi.click(function() { index = $(this).index(); next(); }); left.click(function() { //下標--，纔會等於-1
        index--; next(); }); right.click(function() { //下標++，纔會等於長度
        index++; next(); }); //優化成函數，使用時能夠再各處直接調用
    function next() { if(index == -1) { index = imgLi.length - 1; } else if(index == imgLi.length) { index = 0; }; //循環清空
        numLi.removeClass("color"); //只給點擊按鈕添加class
        numLi.eq(index).addClass("color"); //點擊按鈕，顯示對應圖片
        imgWrap.css('left', -imgLi.width() * index); }; //開啓定時器
    var timer = setInterval(function() { index++; next(); }, 2000); //鼠標移入和移出事件清除、開啓定時器
    wrap.hover(function() { clearInterval(timer); }, function() { //不要寫var，不然會開啓兩次定時器
        timer = setInterval(function() { index++; next(); }, 2000); }); };