轮播图2 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>

<body id="bo">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-decoration: none;
            transition: all 0.5s ease-in-out;
        }

        body {
            background-color: rgb(68, 102, 129);
        }

        #banner {
            width: 794px;
            height: 476px;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 200px;
            background-image: url(./images/b1.png);
            position: relative;
        }

        #banner:hover .set {
            display: block;
        }

        .set {
            display: none;
            position: absolute;
            width: 100%;
            height: 150px;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            color: white;
            font-size: 100px;
            font-weight: 800;
            opacity: 0.8;
        }

        .set .l {
            cursor: pointer;
            float: left;
        }

        .set .l:hover {
            opacity: 0.5;
        }

        .set .r {
            cursor: pointer;
            float: right;
        }

        .set .r:hover {
            opacity: 0.5;
        }

        .clear {
            clear: both;
        }

        .test {
            width: 30px;
            height: 64px;
            background-image: url(./images/index.png);
            background-repeat: no-repeat;
            background-position: -82px -145px;
        }

        .test1 {
            width: 30px;
            height: 64px;
            background-image: url(./images/index.png);
            background-repeat: no-repeat;
            background-position: -120px -145px;
        }

        .meun {
            position: absolute;
            width: 700px;
            right: 0;
            left: 0;
            margin: 55% auto 0 auto;
            text-align: center;
        }

        .meun ul li {
            display: inline-block;
            margin-right: 10px;
            background-color: crimson;
            width: 40px;
            height: 5px;
            cursor: pointer;
        }

        .meun ul li:hover {
            background-color: cyan;
        }

        .meun ul li:nth-of-type(8) {
            margin-right: 0;
        }

        .meun ul li:nth-of-type(1) {
            background-color: cyan;
        }
    </style>

    <div id="banner">
        <div class="set">
            <div id="ll" class="l">‹</div>
            <div id="rr" class="r">›</div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="meun">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            var banners = ["b1.png", "b2.png", "b3.png", "b4.png", "b5.png", "b6.png", "b7.png", "b8.png"];
            var backcolor = ["rgb(68, 102, 129)", "rgb(191, 15, 25)", "rgb(121, 9, 21)", "rgb(169, 129, 200)",
                "rgb(125, 30, 28)", "rgb(168, 21, 1)", "rgb(246, 190, 163)", "rgb(13, 55, 163)"
            ];
            var j = 69999;
            var s1, i;

            // 改变样式的函数
            function banmina(zzz) {
                $(".meun li").css("background-color", "crimson");
                $("#bo").css('background-color', backcolor[zzz]);
                $("#banner").css('background-image', "url(./images/" + banners[zzz] + ")");
                $(".meun li").eq(zzz).css("background-color", "cyan");
            }

            // 启动轮播图自动播放效果
            s1 = setInterval(function () {
                j++;
                i = j % 8;
                banmina(i);
            }, 5000);

            //上一张
            $("#ll").click(function () {
                j--;
                i = j % 8;
                banmina(i);
            });
            // 下一张
            $("#rr").click(function () {
                j++;
                i = j % 8;
                banmina(i);
            });

            // 下方按钮
            $(".meun li").hover(function () {
                // 清除定时器
                clearInterval(s1);
                // 改变样式
                banmina($(this).index());
            }, function () {
                // 创建定时器
                s1 = setInterval(ban, 1000);
            });
        })
    </script>
</body>

</html>

　　

 

posted @ 2020-12-18 10:28  小白fox  阅读(89)  评论(0)    收藏  举报