jQuery-无缝轮播

最新推荐文章于 2023-06-28 14:53:42 发布

冒充斯内克

最新推荐文章于 2023-06-28 14:53:42 发布

阅读量167

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_65390619/article/details/128559429

版权

不解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap{
            width: 750px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }
        .carousal{
            width: 10000px;
            height: 500px;
            display: flex;
            overflow: hidden;
            position: relative;
        }
        .carousal li{
            width: 750px;
            height: 500px;
            background-color: rgb(225, 13, 147);
            color: aliceblue;
            border: 2px solid black;
            box-sizing: border-box;
        }
        .dots{
            display: flex;
            position: absolute;
            bottom: 20px;
            left: 300px;
        }
        .dots li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            border: 1px solid black;
            margin-right: 10px;
        }
        .on{
            background-color: red!important;
            border: 1px solid red!important;
        }
        button{
            width: 30px;
            height: 30px;
            background-color: #fff;
            position: absolute;
            top: 240px;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
    </style>
</head>
<body>
    //窗口作用
    <div class="wrap">
        //移动盒子，达到轮播效果
        <ul class="carousal">
            //数字部分插入图片
            <li>00001</li>
            <li>00002</li>
            <li>00003</li>
            <li>00004</li>
            <li>00005</li>
            <li>00006</li>
            <li>00007</li>
            <li>00001</li>
        </ul>
        
    <ul class="dots">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button class="left"><</button><button class="right">></button>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        var len=$(".carousal li").length;
        var idx=0;
        var timer=setInterval(slider,3000)
        function slider(){
            idx++;
            $(".carousal").animate({
                left:-idx*750
            },function(){
                if(idx== len - 1){
                    idx=0
                $(".carousal").css({left:0})
                }
            $(".dots li").eq(idx).addClass("on").siblings().removeClass("on")
            })
        }
        // 鼠标滑过停止自动轮播，鼠标移开自动轮播
        $(".wrap").hover(function(){
            clearInterval(timer)
        },function(){
            timer=setInterval(slider,3000)
        })
        $(".left").click(function(){
            if($(".carousal").is(":animated")){
                return
            }
            idx--;
            if(idx<0){
                idx=len-2;
                $(".carousal").css({left:-(idx+1)*750})
            }
            $(".carousal").animate({left:-idx*750})
            $(".dots li").eq(idx).addClass("on").siblings().removeClass("on")
        })
        $(".right").click(function(){
            if($(".carousal").is(":animated")){
                return
            }
            slider()
        })
        // 底部导航点击
        $(".dots").on("click","li",function(){
            if($(".carousal").is(":animated")){
                return
            }
            idx=$(this).index()
            $(".dots li").eq(idx).addClass("on").siblings().removeClass("on")
            $(".carousal").animate({left:-idx*750})
        })
    </script>
</body>
</html>