JQuery之無縫輪播（part4）

今天寫的寫的這個是自適應的無縫輪播。

1：setInterval（）定時器

2：clearInterval（）關閉定時器

方法一和方法二很像，只有細微差別。

方法一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,
        html,
        ul,
        li {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .banner_div {
            width: 100%;
            height: auto;
            overflow: hidden;
            position: relative;
        }

        .banner_img {
            width: 400%;
            height: auto;

        }

        .banner_img li {
            width: 25%;
            height: auto;
            float: left;

        }

        .banner_img li img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }

        .banner_num {
            position: absolute;
            bottom: 3%;
            bottom: 3vh;
            width: 100%;
            text-align: center;
        }

        .banner_num li {
            float: none;
            display: inline-block;
            width: 12px;
            height: 12px;
            margin: 0 5px;
            border-radius: 50%;
            border: 2px solid #3eb5ff;
            background: #fff;
            box-sizing: border-box;
            cursor: pointer;
        }

        .banner_num li.active {
            background: #3eb5ff;
            border: 2px solid #fff;
        }
    </style>
</head>
<body>
<div class="banner_div">
    <ul class="banner_num"></ul>
    <ul class="banner_img">
        <li style="background:#01020f;">
            <a target="_black" href="">
                <img src="img/7b5085f583e732a0c5de3ef183f5e6811553155542.jpg" />
            </a>
        </li>
        <li style="background:#01020f;">
            <a target="_black" href="">
                <img src="img/25a81eee1ea53311c4947c82c091a09e1551845761.jpg" />
            </a>
        </li>
        <li style="background:#01020f;">
            <a target="_black" href="">
                <img src="img/7640717475412ec189396ea6c73a66921548819501.jpg" />
            </a>
        </li>
        <li style="background:#01020f;">
            <a target="_black" href="">
                <img src="img/7b5085f583e732a0c5de3ef183f5e6811553155542.jpg" />
            </a>
        </li>
    </ul>
</div>
    <script src="js/jquery.min.js"> </script>
    <script>
        $(document).ready(function () {
             var size = $(".banner_img li").length;//獲取li的長度
            for (var j = 1; j < size; j++) {
                var _html = '<li></li>';
                $(".banner_num").append(_html);//添加小圓點
            }
            $(".banner_num li:first-child").addClass("active");//為第一個小圓點加active
            var i = 0;
            var t = setInterval(move, 4000);
            $(".banner_div").hover(function () {
                clearInterval(t);
            }, function () {
                t = setInterval(move, 4000);
            });
            $(".banner_num li").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                var index = $(this).index();
                i = index;
                if (i == 0) {
                    i = size - 1;
                }
                var left = -i * (100) + "%";
                $(".banner_img").css("marginLeft", left);
            });
            function move() {			
                i++;
                if (i == size - 1) {
                    show();
                    $(".banner_num li").eq(0).addClass("active").siblings().removeClass("active");
                } else if (i == size) {
                    $(".banner_img").css("margin-left", "0");
                    i = 1;
                    show();
                } else {
                    show();
                }
            }
            function show() {
                var left = -i * (100) + "%";
                $(".banner_img").animate({ marginLeft: left }, 500);
                $(".banner_num li").eq(i).addClass("active").siblings().removeClass("active");
            }
        })
    </script>
</body>

</html>

方法二：

            var time = 2000,
                imgsize = $(".banner_img li").length,
                index = 0,
                t = setInterval(move, time);
            for (let i = 0; i < imgsize - 1; i++) {
                var linum = '<li></li>';
                $(".banner_num").append(linum);
            }

            $(".banner_num li").first().addClass('active');

            $(".banner_num").on("click", "li", function () {
                $(this).addClass("active").siblings().removeClass('active');
                var activedz = $(".active").prevAll().length;
                index = activedz;
                if (activedz == 0) {
                    activedz = imgsize - 1;//0=3
                };
                var left = -index * (100) + "%";
                $(".banner_img").css("marginLeft", left);
            });
            $(".banner_div").hover(function () {
                clearInterval(t);
            }, function () {
                t = setInterval(move, time);
            });
            function move() {
                index++;
                if (index == imgsize - 1) {
                    show();
                    $(".banner_num li").eq(0).addClass("active").siblings().removeClass("active");
                } else if (index == imgsize) {
                    $(".banner_img").css("margin-left", "0");
                    index = 1;
                    show();
                } else {
                    show();
                }
            };
            function show() {
                var left = -index * (100) + "%";
                $(".banner_img").animate({ marginLeft: left }, 500);
                $(".banner_num li").eq(index).addClass("active").siblings().removeClass("active");
            }

結果為：

JQuery之無縫輪播（part4）

猜你喜欢