jqury實作圖檔輪播（自動輪播+手動輪播），簡單易學，熱血奉獻

部落客最近在搞圖檔輪播圖，經過多方查閱資料，經典jquery輪播圖分為兩種，第一種呼吸輪播圖，第二種是左右無縫滑動輪播圖。本例為第二種方法，原理大同小異，最大的差別在于圖檔的擺放方式，呼吸輪播圖是所有圖檔疊在一起通過display控制，本例使用的方法是animate 位移的進行控制，前端所有圖檔float排序，逐個依次循環顯示，前台用LI代替圖檔，需要圖檔的自行引入，不加入圖檔也可以示範，本部落客已認證JQ代碼将LI已随機設定背景顔色，初學的朋友可直接複制最後一個代碼段使用。

前端html代碼：

<body>
    <div class="box">
        <ul class="img">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="move">
            <li>&lt;</li>
            <li>&gt;</li>
        </ul>
        <ul class="num"></ul>
    </div>
</body>

樣式代碼：

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #eee;
        }

        .box {
            width: 680px;
            height: 340px;
            margin: 50px auto;
            background: #fff;
            position: relative;
            overflow: hidden;
        }

        ul, li {
            list-style: none;
        }

        .box .img {
            width: 5000px;
            position: absolute;
            top: 0;
            left: 0;
            height: 340px;
        }

        .box:hover .move {
            display: block;
        }

        .img > li {
            width: 680px;
            height: 340px;
            float: left;
            /*opacity: 0.2;*/
        }

        .move {
            width: 30px;
            height: 50px;
            line-height: 50px;
            display: none;
        }

            .move li {
                top: 50%;
                margin-top: -25px;
                position: absolute;
                width: 30px;
                height: 50px;
                line-height: 50px;
                font-size: 30px;
                color: #fff;
                background: rgba(0,0,0,.6);
                text-align: center;
            }

                .move li:nth-of-type(2) {
                    right: 0;
                }

        .num {
            position: absolute;
            bottom: 10px;
            width: 100%;
            height: 15px;
            text-align: center;
        }

            .num li {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                display: inline-block;
                background: orange;
                margin: 0 5px;
            }

                .num li.on {
                    background: lightgreen;
                }
    </style>

重點來了，jquery代碼：

 <script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /*圖檔滑動輪播台*/
            $(".box .img li").each(function (index) {
                $(this).css('background', "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")");
            });
            var i = 0;
            //擷取圖檔的寬度
            var imgwidth = $(".img li").width();
            var length = $(".img li").length;
            //alert(length);
            //輸出訓示燈
            for (j = 1; j <= length; j++) {
                var li = "<li>" + j + "</li>";
                $('.num').append(li);
            }
            //擷取圖檔的索引值
            var index = $(".img li").length - 1;
            //alert(index);
            //克隆第一張圖檔，
            var first = $(".img li").first().clone();
            //将克隆的圖檔排在最後一張後面
            $(".img").append(first);
            //左移按鈕

            $(".move li:nth-of-type(1)").click(function () {
                i++;

                if (i > length) {

                    $(".img").css({ left: "0px" });
                    i = 1;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });

                if (i > index) {

                    $(".num li").eq(0).addClass("on").siblings().removeClass();
                }
                else {
                    $(".num li").eq(i).addClass("on").siblings().removeClass();
                }


            });
            //右移按鈕
            $(".move li:nth-of-type(2)").click(function () {
                i--;
                if (i < 0) {
                    $(".img").css({ left: -length * imgwidth + "px" });
                    i = index;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });
                $(".num li").eq(i).addClass("on").siblings().removeClass();
            });
            //設定自動播放

            var timer = setInterval(function () {
                i++;
                if (i > length) {

                    $(".img").css({ left: "0px" });
                    i = 1;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });
                if (i > index) {

                    $(".num li").eq(0).addClass("on").siblings().removeClass();
                }
                else {
                    $(".num li").eq(i).addClass("on").siblings().removeClass();
                }

            }, 3000);

            $(".box").mouseover(function () {
                clearInterval(timer);

            });
            $(".box").mouseout(function () {
                timer = setInterval(function () {
                    i++;
                    if (i > length) {

                        $(".img").css({ left: "0px" });
                        i = 1;
                    }
                    $(".img").animate({ left: -i * imgwidth + "px" });
                    if (i > index) {

                        $(".num li").eq(0).addClass("on").siblings().removeClass();
                    }
                    else {
                        $(".num li").eq(i).addClass("on").siblings().removeClass();
                    }

                }, 3000);

            })
            $(".num li").mouseover(function () {
                i = $(this).index();
                $(".img").animate({ left: -i * imgwidth + "px" });
                $(".num li").eq(i).addClass("on").siblings().removeClass();
            });
        });
    </script>

全檔案代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #eee;
        }

        .box {
            width: 680px;
            height: 340px;
            margin: 50px auto;
            background: #fff;
            position: relative;
            overflow: hidden;
        }

        ul, li {
            list-style: none;
        }

        .box .img {
            width: 5000px;
            position: absolute;
            top: 0;
            left: 0;
            height: 340px;
        }

        .box:hover .move {
            display: block;
        }

        .img > li {
            width: 680px;
            height: 340px;
            float: left;
            /*opacity: 0.2;*/
        }

        .move {
            width: 30px;
            height: 50px;
            line-height: 50px;
            display: none;
        }

            .move li {
                top: 50%;
                margin-top: -25px;
                position: absolute;
                width: 30px;
                height: 50px;
                line-height: 50px;
                font-size: 30px;
                color: #fff;
                background: rgba(0,0,0,.6);
                text-align: center;
            }

                .move li:nth-of-type(2) {
                    right: 0;
                }

        .num {
            position: absolute;
            bottom: 10px;
            width: 100%;
            height: 15px;
            text-align: center;
        }

            .num li {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                display: inline-block;
                background: orange;
                margin: 0 5px;
            }

                .num li.on {
                    background: lightgreen;
                }
    </style>
    <script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /*圖檔滑動輪播台*/
            $(".box .img li").each(function (index) {
                $(this).css('background', "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")");
            });
            var i = 0;
            //擷取圖檔的寬度
            var imgwidth = $(".img li").width();
            var length = $(".img li").length;
            //alert(length);
            //輸出訓示燈
            for (j = 1; j <= length; j++) {
                var li = "<li>" + j + "</li>";
                $('.num').append(li);
            }
            //擷取圖檔的索引值
            var index = $(".img li").length - 1;
            //alert(index);
            //克隆第一張圖檔，
            var first = $(".img li").first().clone();
            //将克隆的圖檔排在最後一張後面
            $(".img").append(first);
            //左移按鈕

            $(".move li:nth-of-type(1)").click(function () {
                i++;

                if (i > length) {

                    $(".img").css({ left: "0px" });
                    i = 1;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });

                if (i > index) {

                    $(".num li").eq(0).addClass("on").siblings().removeClass();
                }
                else {
                    $(".num li").eq(i).addClass("on").siblings().removeClass();
                }


            });
            //右移按鈕
            $(".move li:nth-of-type(2)").click(function () {
                i--;
                if (i < 0) {
                    $(".img").css({ left: -length * imgwidth + "px" });
                    i = index;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });
                $(".num li").eq(i).addClass("on").siblings().removeClass();
            });
            //設定自動播放

            var timer = setInterval(function () {
                i++;
                if (i > length) {

                    $(".img").css({ left: "0px" });
                    i = 1;
                }
                $(".img").animate({ left: -i * imgwidth + "px" });
                if (i > index) {

                    $(".num li").eq(0).addClass("on").siblings().removeClass();
                }
                else {
                    $(".num li").eq(i).addClass("on").siblings().removeClass();
                }

            }, 3000);

            $(".box").mouseover(function () {
                clearInterval(timer);

            });
            $(".box").mouseout(function () {
                timer = setInterval(function () {
                    i++;
                    if (i > length) {

                        $(".img").css({ left: "0px" });
                        i = 1;
                    }
                    $(".img").animate({ left: -i * imgwidth + "px" });
                    if (i > index) {

                        $(".num li").eq(0).addClass("on").siblings().removeClass();
                    }
                    else {
                        $(".num li").eq(i).addClass("on").siblings().removeClass();
                    }

                }, 3000);

            })
            $(".num li").mouseover(function () {
                i = $(this).index();
                $(".img").animate({ left: -i * imgwidth + "px" });
                $(".num li").eq(i).addClass("on").siblings().removeClass();
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <ul class="img">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="move">
            <li>&lt;</li>
            <li>&gt;</li>
        </ul>
        <ul class="num"></ul>
    </div>
</body>
</html>

jqury實作圖檔輪播（自動輪播+手動輪播），簡單易學，熱血奉獻

繼續閱讀

用jQuery實作一個簡易的聊天框

使用canvas制作簡易的資料結構核心算法示範系統——線性表(三)——頭插法

Jquery 拖動視窗

用js實作的一個加載中狀态的動态效果

jquery實作複制到剪貼闆通用

Jquery 實作複制到剪貼闆

ZeroClipboard2.2.0版本跨浏覽器複制（兼解決IE下相容問題）

推薦一些有用的網站一鍵分享制作網站小圖示插件網站seo 相關的網站地圖 api二維碼相關

jQuery實作Ajax通訊的幾種常用方式

jqGrid的使用筆記：5. 事件

jQuery實作百度搜尋框

2010年終總結--技術篇

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

JQuery--dom捕獲html元素

jquery_126_demo