html轮播图实现

最新推荐文章于 2024-09-11 23:16:45 发布

幻千纷纭

最新推荐文章于 2024-09-11 23:16:45 发布

阅读量4.9k

点赞数 5

分类专栏： html 文章标签： html js

本文链接：https://blog.csdn.net/qq_26018075/article/details/107119258

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.项目预览地址：

http://study.zyjblogs.cn/project/lunbo.html

2.上图

3.上代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        #banner {
            border: solid 5px pink;
            width: 520px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        
        .imgs {
            width: 2600px;
            border: solid 1px black;
        }
        
        .imgs li {
            float: left;
        }
        
        .imgs li img {
            width: 520px;
        }
        
        .cursor {
            width: 30px;
            height: 50px;
            background: rgb(0, 0, 0, 0.3);
            position: absolute;
            top: 110px;
            color: white;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        
        .cursor:hover {
            background: rgb(0, 0, 0, 0.6);
        }
        
        .pre {
            left: 0px;
        }
        
        .next {
            right: 0px;
        }
        
        .dots {
            position: absolute;
            width: 100px;
            left: 200px;
            bottom: 10px;
            border: solid 1px pink;
            overflow: hidden;
            padding: 5p 10px;
        }
        
        .dots li {
            float: left;
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 5px;
            margin: 5px 5px;
        }
        
        .active {
            background: pink!important;
        }
    </style>
</head>

<body>
    <div id="banner">
        <ul class="imgs">
            <li class="item"><img src="http://study.zyjblogs.cn/web/img/1.webp" alt=""></li>
            <li class="item"><img src="http://study.zyjblogs.cn/web/img/2.jpg" alt=""></li>
            <li class="item"><img src="http://study.zyjblogs.cn/web/img/3.jpg" alt=""></li>
            <li class="item"><img src="http://study.zyjblogs.cn/web/img/4.jpg" alt=""></li>
            <li class="item"><img src="http://study.zyjblogs.cn/web/img/5.webp" alt=""></li>
        </ul>

        <div class="cursor pre">&lt;</div>
        <div class="cursor next">&gt;</div>

        <ul class="dots">
            <li class="btn active"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
        </ul>
    </div>

    <script type="text/javascript" src="http://study.zyjblogs.cn/web/js/jquery-3.5.1.min.js"></script>
    <script>
        var index = 0;
        var timer = setInterval("next()", 3000);

        $("img").mouseover(
            function() {
                clearTimeout(timer);
            }
        )
        $("img").mouseout(
            function() {
                clearTimeout(timer);
                timer = setInterval("next()", 3000);
            }
        )
        $(".dots .btn").mouseover(
            function() {
                index = $(this).index(); //获取点击元素的下标
                $(this).addClass("active").siblings().removeClass("active");
                $(".item").eq(index).fadeIn().siblings().fadeOut();
                clearTimeout(timer);
            }
        )
        $(".dots .btn").mouseout(
            function() {
                index = $(this).index(); //获取点击元素的下标
                $(this).addClass("active").siblings().removeClass("active");
                $(".item").eq(index).fadeIn().siblings().fadeOut();
                clearTimeout(timer);
                timer = setInterval("next()", 3000);
            }
        )

        function play() {
            // var offset = index * (-520) + "px";
            // $(".imgs").animate({
            //     "margin-left": offset
            // }, 1000)
            $(".item").eq(index).fadeIn().siblings().fadeOut();
            $(".dots li").removeClass("active").eq(index).addClass("active");

        }

        function next() {
            index++;
            if (index == 5) index = 0;
            play();
        }

        function pre() {
            index--;
            if (index == -1) index = 4;
            play();
        }
        $(".next").click(next);
        $(".pre").click(pre);
    </script>
</body>

</html>