jQuery实现淡入淡出的轮播图

最新推荐文章于 2022-09-04 23:56:48 发布

原创最新推荐文章于 2022-09-04 23:56:48 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#淡入淡出的轮播图 #jQuery

前端从入门到放弃专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的京东风格轮播图动画案例。该案例详细展示了如何通过HTML、CSS和JavaScript创建一个具备淡入淡出效果的图片轮播组件，并集成了自动播放、手动切换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你可以换一下图片测试一次：

width: 780px;
height: 519px;

我的图片尺寸。

你只需要修改一下：

<div id="imgs">
    <img src="Img_JD/1.jpg" alt="">
    <img src="Img_JD/7.jpg" alt="">
    <img src="Img_JD/3.jpg" alt="">
    <img src="Img_JD/4.jpg" alt="">
    <img src="Img_JD/5.jpg" alt="">
    <img src="Img_JD/6.jpg" alt="">
</div>

图片的url就可以测试成功。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery京东淡入淡出动画</title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #lbt {
            width: 780px;
            height: 519px;
            margin: 20px auto;
            position: relative;
        }

        #lbt #imgs {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #lbt #imgs img {
            width: 780px;
            height: 519px;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        /*将除了第一张以外的图片全部隐藏*/
        #lbt #imgs img:first-child {
            display: block;
        }

        #lbt #indicator {
            width: 110px;
            height: 18px;
            background-color: lightgray;
            border-radius: 10px;
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            margin: auto;
            opacity: 0.8;
        }

        #lbt #indicator span {
            display: block;
            width: 10px;
            height: 10px;
            margin: 4px;
            background-color: white;
            border-radius: 50%;
            float: left;
        }

        #lbt #indicator span:nth-child(1) {
            background-color: darkorange;
        }

        #lbt #preNext {
            width: 100%;
            height: 50px;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        #lbt #preNext span {
            position: absolute;
            font-size: 40px;
            line-height: 50px;
            background-color: gray;
            opacity: 0;
        }

        #lbt #preNext span:nth-child(2) {
            right: 0;
        }

        #lbt:hover #preNext span {
            opacity: 0.5;
        }

        #lbt #preNext span:hover {
            opacity: 1;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="lbt">
    <div id="imgs">
        <img src="Img_JD/1.jpg" alt="">
        <img src="Img_JD/7.jpg" alt="">
        <img src="Img_JD/3.jpg" alt="">
        <img src="Img_JD/4.jpg" alt="">
        <img src="Img_JD/5.jpg" alt="">
        <img src="Img_JD/6.jpg" alt="">
    </div>
    <div id="indicator">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div id="preNext">
        <span><</span>
        <span>></span>
    </div>
</div>
<script>
    $(function () {

        /*播放函数
   从from淡入淡出至to
   * */
        function play(from,to) {
            //给from淡出，给to淡入。stop作用是清除之前的动画
            //问题：为啥这里不能用链式法则，因为fadeOut并没有return this。而stop返回了this。
            $("#lbt #imgs img").eq(from).stop().fadeOut(1000);
            $("#lbt #imgs img").eq(to).stop().fadeIn(1000);

            //为设置指示器的样式
            $("#lbt #indicator span").eq(from).css("backgroundColor","white");
            $("#lbt #indicator span").eq(to).css("backgroundColor","darkorange");

        }
        
        //currentIndex表示当前照片的下标，从0开始
        var currentIndex=0;
        var id;

        /*函数是自动播放效果的实现
        * */
        function autoPlay() {
            id = setInterval(function () {
                play(currentIndex,(currentIndex+1) % 6);
                currentIndex++;
                currentIndex = currentIndex == 6 ? 0 : currentIndex;
            },2000)
        }
        autoPlay();

        /*注册事件
       * 1.为每个span的指示器注册点击事件
       * 2.为两个左右preNext的两个span注册点击事件
       * */
        function eventInit() {
            //为每个指示器添加点击事件
            $("#lbt #indicator span").click(function () {
                /*不管是不是用jQuery，处理程序中的this都是指的是原生的那个dom元素*/
                $(this).css("backgroundColor","darkorange")
                    .siblings().css("backgroundColor","white");
                /*当点击了那个span，那么相应的图片显示出来*/
                var index = $(this).index();
                play(currentIndex,index);
                currentIndex = index;
            });

            //为preNext设置点击事件
            $("#lbt #preNext span:nth-child(1)").click(function () {
                play(currentIndex,currentIndex-1);
                currentIndex--;
                currentIndex=currentIndex== -1 ? 5 :currentIndex;
            });
            $("#lbt #preNext span:nth-child(2)").click(function () {
                play(currentIndex,(currentIndex+1)%6);
                currentIndex++;
                currentIndex=currentIndex==6 ? 0 :currentIndex;
            });

            //为轮播图整个界面区域设置mouseenter和mouseleave，使得鼠标在这里面清除定时器
            $("#lbt").mouseenter(function () {
                clearInterval(id);
            }).mouseleave(function () {
                autoPlay();
            });
        }
        eventInit();
    });
    

</script>
</body>
</html>