jQuery实现呼吸灯轮播图

2023年7月22日10:08:52

jQuery实现呼吸灯轮播图

jQuery实现呼吸灯轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸灯轮播图</title>
    <script src="../jquery-3.1.1.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 650px;
            height: 360px;
        }
        .carousel{
            width: 650px;
            height: 360px;
            margin: 100px auto;
            position: relative;
        }
        .carousel .carousel_images .unit{
            list-style: none;
            width: 520px;
            height: 280px;
            position: relative;
        }
        .carousel .carousel_images .unit li{
            top: 0;
            left: 0;
            width: 520px;
            height: 280px;
            display: none;
            position: absolute;
        }
        .carousel .carousel_images .unit li.first{
            display: block;
        }
        .carousel .carousel_navs{
            bottom: 0;
            right: 0;
            width: 123px;
            height: 24px;
            position: absolute;
        }
        .carousel .carousel_navs ol{
            list-style: none;
        }
        .carousel .carousel_navs ol li{
            float: left;
            width: 16px;
            height: 16px;
            margin-right: 6px;
            border-radius: 50%;
            background-color: #eee;
            opacity: 0.6;
        }
        .carousel .carousel_navs ol li.cur{
            background: darkred;
        }
        .carousel .carousel_btns .btn{
            widows: 40px;
            height: 40px;
            border-radius: 20%;
            background-color: #ffd700;
            text-align: center;
            line-height: 40px;
            position: absolute;
            font-size: 30px;
            font-family: "楷体";
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }
        .carousel .carousel_btns .btn.left{
            top: 50%;
            left: 10px;
            margin-top: -20px;
        }
        .carousel .carousel_btns .btn.right{
            top: 50%;
            right: 10px;
            margin-top: -20px;
        }

    </style>
    <script>
        $(function(){
        var $unit = $(".carousel_images ul");  //获取图像
        var $btn_left = $(".carousel_btns .left"); //左侧按钮
        var $btn_right = $(".carousel_btns .right"); //右侧按钮
        var $carousel_navs_lis = $(".carousel_navs ol li"); //小圆点
        var imgs = $(".carousel_images ul li").length; //图片数量
        var idx = 0;  //索引量

        //设置自动播放
        var timer = setInterval(change,1000);
        //右侧单击响应函数
        $btn_right.click(change);
        //封装
        function change(){
            //防多次点击
            if($unit.is(":animated")){
                return;
            }
            //旧图淡出
            $unit.find("li").eq(idx).fadeOut('fast');
            //新图淡入
            //防溢出
            idx++;
            if(idx>imgs-1){
                idx = 0;
            }
            $unit.find("li").eq(idx).fadeIn('fast');
            //小圆点变化
            $carousel_navs_lis.eq(idx).addClass("cur").siblings().removeClass("cur");
        };
        //设置鼠标移入时，页面定时器停止，移除后继续
        $unit.mouseover(function(){
            clearInterval(timer);
        }).mouseleave(function(){
            timer = setInterval(change,1000);
        });
        //左侧单击响应函数
        $btn_left.click(function(){
            //防多次点击
            if($unit.is(":animated")){
                return;
            }
            //旧图淡出
            $unit.find("li").eq(idx).fadeOut('fast');
            //新图淡入
            //防溢出
            idx--;
            if(idx<0){
                idx = imgs-1;
            }
            $unit.find("li").eq(idx).fadeIn('fast');
            //小圆点变化
            $carousel_navs_lis.eq(idx).addClass("cur").siblings().removeClass("cur");
        });
        //鼠标滑过小圆点时响应函数
        $carousel_navs_lis.mouseover(function(){
            //防多次点击
            if($unit.is(":animated")){
                return;
            }
            //旧图淡出
            $unit.find("li").eq(idx).fadeOut('fast');
            //新图淡入
            idx = $(this).index();
            $unit.find("li").eq(idx).fadeIn('fast');
            //小圆点变化
            $carousel_navs_lis.eq(idx).addClass("cur").siblings().removeClass("cur");
        });

        });
    </script>
</head>
<body>
    <div class="carousel" id="carousel">
        <div class="carousel_images">
            <ul class="unit">
                <li class="first">
                    <img src="../测试图片/0.jpg" alt="">
                </li>
                <li>
                    <a href="">
                        <img src="../测试图片/1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../测试图片/2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../测试图片/3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../测试图片/4.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="carousel_navs">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <div class="carousel_btns">
            <a href="javascript:;" class="btn left">&lt;</a>
            <a href="javascript:;" class="btn right">&gt;</a>
        </div>
    </div>
</body>
</html>

  • 作者：回忆是一座城堡
  • 原文链接：https://blog.csdn.net/weixin_44384797/article/details/107416797
    更新时间：2023年7月22日10:08:52 ，共 3244 字。