前言

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

淘寶輪播圖

京東輪播圖

天貓輪播圖

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

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

我給大家提供輪播圖示例

01 CSS代碼

       <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>

02 HTML 代碼

<!--輪播圖開始注意這里的圖片路徑，要使用自己的圖片路徑哦-->        <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"><</a>
            <a href="javascript:;" class="arrow" id="right">></a>
        </div>

03 JS 代碼

<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() { //用于定時器的函數(shù)
                    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) { //用于切換圖片的函數(shù)
                    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>