純js手寫輪播圖案例，簡單的js代碼。

輪播圖出現在各大網站，基本上人們進入任何一個網站的時候，第一眼看見的內容就是輪播圖，三兩張圖片，有的數量更多一些。這些就是網站建設中所謂的banner廣告輪播圖，而這些信息往往是瀏覽網頁時的第一視覺，所以這些輪播廣告圖可作為網站建設中至關重要的元素。首頁banner廣告輪播圖的存在不光光起到了裝飾網站的作用，它所帶來的網絡營銷效果才是真正意義上的存在價值。

淘寶輪播圖

京東輪播圖

天貓輪播圖

所以在網站建設的時候，網站banner圖一定要精心設計，不可敷衍了事，Banner圖的數量和輪播的交互方式等等都要經過深思熟慮，美觀固然重要，但是也要考慮到用戶體驗，以及廣告圖所帶來的營銷效果。我們一直認為，首頁輪播廣告圖在整個網站建設的重要性不可忽視。

 

我給大家提供一個純Js輪播圖示例代碼，大家可在此基礎上進行改進，包括指示器的樣式，容器的大小，按鈕的樣式，輪播時間等等都可以修改的。該代碼通俗易懂，Js部分邏輯清晰。趕緊動手起來吧朋友們，創造屬於自己的樣式！！

 

我給大家提供輪播圖示例

 

01CSS代碼

  <style>
            *{
                list-style: none;
            }
            #wrap {
                width: 590px;
                height: 470px;
                margin: 150px auto;
                position: relative;
                cursor: pointer;
            }

            #pic li {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }

            #num {
                position: absolute;
                z-index: 2;
                bottom: 20px;
                left: 46px;
            }

            #num li {
                float: left;
                width: 8px;
                height: 8px;
                margin: 5px;
                border-radius: 50%;
                border: 1px solid #FFFFFF;
                line-height: 20px;
                background: transparent;
                text-align: center;
            }

            #num li.active {
                background:  #fefefe;
            }

            .arrow {
                z-index: 3;
                height: 40px;
                width: 30px;
                position: absolute;
                top: 45%;
                line-height: 40px;
                background: rgba(0, 0, 0, 0.3);
                text-align: center;
                display: none;
            }
            #wrap:hover .arrow {
                display: block;
            }
            .arrow:hover {
                background: rgba(0, 0, 0, 0.7);
            }


            #left {
                left: 0;
            }

            #right {
                right: 0;
            }

        </style>

 

 

 

02HTML 代碼

<!--輪播圖開始注意這里的圖片路徑，要使用自己的圖片路徑哦-->        <div id="wrap">

            <ul id="pic">
                <li style="display: none;"><img src="images/f7a4711ce9487466.jpg" alt=""></li>
                <li style="display: none;"><img src="images/ecc8690ae254c16f.jpg" alt=""></li>
                <li style="display: block;"><img src="images/46cdcd636c8608e2.jpg" alt=""></li>
                <li style="display: none;"><img src="images/79dd3ce6165857f7.jpg" alt=""></li>
                <li style="display: none;"><img src="images/b31ec8402a42fbb3.jpg" alt=""></li>
                <li style="display: none;"><img src="images/93c8a83baeaa7f49.jpg" alt=""></li>
                <li style="display: none;"><img src="images/cf523718998ccd27.jpg" alt=""></li>
            </ul>
            <ul id="num">
                <li class="active"></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
                <li class=""></li>
            </ul>
            <a href="javascript:;" class="arrow" id="left">&lt;</a>
            <a href="javascript:;" class="arrow" id="right">&gt;</a>
        </div>
 

 

 

 

03Js 代碼

 

<script type="text/javascript">
            function $(id) {
                return document.getElementById(id); } window.onload = function() { var oLeft = $("left"); var oRight = $("right"); var index = 0; var timer = null; var pic = $("pic").getElementsByTagName("li"); var num = $("num").getElementsByTagName("li"); var oDiv = $("wrap"); oRight.onclick = function() { index++; if (index >= pic.length) { index = 0; } change(index); } oLeft.onclick = function() { index--; if (index < 0) { index = pic.length - 1; } change(index); } oDiv.onmouseover = function() { clearInterval(timer); } oDiv.onmouseout = function() { timer = setInterval(run, 2000); //鼠標移出后重新開始定時器  } timer = setInterval(run, 4000); //定時器 function run() { //用於定時器的函數 index++; if (index >= pic.length) { index = 0; } change(index); } for (var i = 0; i < num.length; i++) { num[i].index = i; //把索引值存起來 num[i].onmouseover = function() { change(this.index); } } function change(curindex) { //用於切換圖片的函數 for (var i = 0; i < pic.length; i++) { pic[i].style.display = "none"; num[i].className = ""; } pic[curindex].style.display = "block"; num[curindex].className = "active"; index = curindex; } } </script> 

 

溫馨提示

如果你喜歡本文，請分享到朋友圈，想要獲得更多信息，請關注我。