碼上歡樂
相關內容    簡體    繁體

jquery實現導航圖輪播

本文轉載自   查看原文   2016-09-11 20:45   1845    jquery 輪播 Banner/ Javascript

版權聲明：作者原創，轉載請注明出處！

 

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

栗子①

HTML布局：注：圖片請自己准備，大小為（W：200px  H：200px）

//最外層容器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代碼

$(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函數里，進行多次調用，程序得到大幅度代碼的優化，提高了程序的可復用性。下面我們進行函數的封裝，封裝好的函數可以的到最大程度的可復用性，相同功能，只需調用相應函數，傳入不同參數即可完成，不需要再重新編寫相同功能的程序，怎么樣，似不似很期待，^_^

 

栗子③

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); }); };

效果圖：

到這里，就結束啦，具體有什么需要注意的地方，我都已經在代碼的注釋里寫的很明確了，如果大家有更好的方法，歡迎與我交流，共同成長和進步！

入我有理解的不正確的地方，歡迎各位大神批評指正，謝謝

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Jquery實現動態導航欄和輪播導航欄 c++數據結構圖論創建一個導航圖，實現基本功能 基於Jquery實現的輪播圖 jquery實現輪播 jQuery輪播圖（一）輪播實現並封裝 微信小程序 的導航圖標 jQuery實現導航欄 Jquery實現左右輪播效果 jquery 實現文字輪播滾動 jquery實現漂亮的輪播圖
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM