jquary实现淡入淡出轮播图、遮罩层实例

最新推荐文章于 2023-06-16 15:08:59 发布

和蔼的阿木木o

最新推荐文章于 2023-06-16 15:08:59 发布

阅读量166

点赞数

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

本文链接：https://blog.csdn.net/m0_59642141/article/details/126656142

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript技术创建具有淡入淡出效果的轮播图以及响应式遮罩层。通过jQuery库实现了轮播图的自动播放、导航按钮点击切换以及小圆点指示器的功能。同时，还展示了当鼠标悬停在图片上时，显示半透明遮罩层和文字优惠信息的交互设计。这些技巧在前端网页设计中非常常见，有助于提升用户体验。

摘要由CSDN通过智能技术生成

淡入淡出轮播图

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .banner {
            position: relative;
            width: 846px;
            height: 472px;
            margin: 0 auto;
        }

        .banner .pics {
            position: relative;
            width: 846px;
        }

        .banner .pics li {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
        }

        .banner>a {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            padding: 4px 6px;
            font-size: 30px;
            color: #fff;
            background-color: rgba(0, 0, 0, .5);
        }

        .banner .prev {
            left: 0;
        }

        .banner .next {
            right: 0;
        }

        .banner .dots {
            display: flex;
            position: absolute;
            left: 50%;
            bottom: 10px;
            transform: translateX(-50%);
        }

        .banner .dots span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 0 4px;
            background-color: #fff;
        }

        .banner .dots span.on {
            background-color: #f00;
        }
    </style>
</head>

<body>

    <div class="banner">
        <ul class="pics">
            <li><a href="#"><img
                        src="https://img.alicdn.com/imgextra/i3/6000000004152/O1CN01NBqTd31gXfF629F6d_!!6000000004152-2-octopus.png"
                        alt=""></a></li>
            <li><a href="#"><img
                        src="https://img.alicdn.com/imgextra/i2/6000000006675/O1CN01SEpdnP1zBCW3KuZrU_!!6000000006675-0-octopus.jpg"
                        alt=""></a></li>
            <li><a href="#"><img
                        src="https://img.alicdn.com/imgextra/i4/6000000001126/O1CN01cvk85T1KBkkLR9Ek8_!!6000000001126-2-octopus.png"
                        alt=""></a></li>
        </ul>
        <a href="javascript:void(0);" class="prev">&lt;</a>
        <a href="javascript:void(0);" class="next">&gt;</a>
        <div class="dots">
            <span class="on"></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

    $(function () {

        var timer = null;
        var $index = 0;//索引
        $(".banner li").eq($index).css("display", "block");

        //点击右侧按钮  索引+1  进行切换
        $(".banner .next").bind("click", function () {
            $index++;
            if ($index >= $(".banner li").length) {
                $index = 0;
            }
            // console.log($index);

            // $(".banner li").eq($index).fadeIn().siblings("li").fadeOut();
            // $(".dots span").eq($index).addClass("on").siblings("span").removeClass("on");

            changeState($index);
        });


        //点击右侧按钮  索引-1  进行切换
        $(".banner .prev").bind("click", function () {
            $index--;
            if ($index <= -1) {
                $index = $(".banner li").length - 1;
            }
            console.log($index);

            // $(".banner li").eq($index).fadeIn().siblings("li").fadeOut();
            // $(".dots span").eq($index).addClass("on").siblings("span").removeClass("on");

            changeState($index);
        });

        //小圆点的单击行为
        $(".dots span").bind("click", function () {
            $index = $(this).index();

            // $(".dots span").eq($index).addClass("on").siblings("span").removeClass("on");
            // $(".banner li").eq($index).fadeIn().siblings("li").fadeOut();

            changeState($index);
        });

        // 优化  修改轮播切换与小圆点状态
        function changeState(idx) {
            $(".dots span").eq(idx).addClass("on").siblings("span").removeClass("on");
            $(".banner li").eq(idx).stop().fadeIn().siblings("li").stop().fadeOut();
        }


        //自动播放
        function autoPlay() {
            timer = setInterval(() => {
                // $(".banner .next").click();
                $(".banner .next").trigger("click");//模拟事件
            }, 2000);
        }
        autoPlay();


        // 光标移入停止自动轮播
        $(".banner").mouseenter(function () {
            clearInterval(timer);

        }).mouseleave(function () {
            autoPlay();
        })
    });

</script>

遮罩层案例

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .list {
            display: flex;
            justify-content: space-between;
            width: 600px;
            margin: 0 auto;
        }

        .list li {
            position: relative;
            width: 150px;
            box-shadow: 0 0 2px rgba(0, 0, 0, .3);
        }

        .list li .mask {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
        }

        .list li .txt {
            display: none;
            position: absolute;
            left: 0;
            bottom: 0;
            font-size: 20px;
            color: #fff;
            width: 100%;
            text-align: center;
            height: 100%;
            line-height: 100px;
            /* background-color: rgba(200, 0, 0, .3); */
        }
    </style>
</head>

<body>

    <ul class="list">
        <li>
            <img src="https://img13.360buyimg.com/jdcms/s150x150_jfs/t1/85025/25/31348/107863/630f1aebE59c58213/4835c1231624b25f.jpg.avif"
                alt="">
            <div class="mask"></div>
            <div class="txt">双十一大优惠</div>
        </li>
        <li>
            <img src="https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/220074/1/19819/165415/62a0cd46E1d1e6e61/51ad166583879efa.jpg.avif"
                alt="">
            <div class="mask"></div>
            <div class="txt">双十一大优惠</div>
        </li>
        <li>
            <img src="https://img12.360buyimg.com/jdcms/s150x150_jfs/t1/128208/24/25714/89930/63071f03E2d35000e/c77c672e5cc540dd.jpg.avif"
                alt="">
            <div class="mask"></div>
            <div class="txt">双十一大优惠</div>
        </li>
    </ul>
</body>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(".list li").hover(function () {
        if ($(this).children(".mask").is(":animated")) {//判断.mask是否是在处于动画执行状态
            return;
        }

        $(this).children(".mask").slideDown();
        $(this).children(".txt").slideDown();
    }, function () {
        $(this).children(".mask").slideUp();
        $(this).children(".txt").slideUp();
    });


    // 合成事件
    // jQuery对象.hover(参数1, 参数2)
    // 参数1：函数  光标移入时调用的函数
    // 参数2：函数  光标移开时调用的函数



</script>