jQuery实现各种轮播图

小白小白从不日白

已于 2022-05-20 13:11:20 修改

阅读量1.4w

点赞数 20

分类专栏： jQuery 文章标签： jquery

于 2021-11-10 17:19:03 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43285360/article/details/121251842

版权

jQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了三种不同的滚动轮播方式：无限循环滚动的图片列表，类似百叶窗的遮罩切换，以及带小圆点和左右箭头的轮播组件。通过jQuery实现动态效果，包括图片淡入淡出、鼠标交互控制和定时切换。

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

无限循环滚动

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 1120px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        
        ul {
            list-style: none;
            width: 3360px;
            height: 300px;
            background: #000;
            /* background: rgba(255, 0, 0, .5); */
        }
        
        ul>li {
            float: left;
        }

    <div>
        <ul>
            <li>
                <img src="img/0.jpg" alt="">
            </li>
            <li>
                <img src="img/1.jpg" alt="">
            </li>
            <li>
                <img src="img/2.jpg" alt="">
            </li>
            <li>
                <img src="img/3.jpg" alt="">
            </li>
            <li>
                <img src="img/0.jpg" alt="">
            </li>
            <li>
                <img src="img/1.jpg" alt="">
            </li>
        </ul>
    </div>

        $(function() {
            //0.定义变量，保存偏移位
            let offset = 0;

            //1.让图片滚动起来
            let timer = null;

            function autoPlay() {
                timer = setInterval(function() {
                    offset += -10;

                    if (offset <= -2240) {
                        offset = 0;
                    }

                    $("ul").css("marginLeft", offset);
                }, 50);
            }

            autoPlay();

            //2.监听li移入和移出事件
            $("li").hover(function() {
                //停止滚动
                clearInterval(timer);

                //给非当前选中添加蒙版
                $(this).siblings().fadeTo(100, 0.5);

                //去除当前选中的蒙版
                $(this).fadeTo(100, 1);
            }, function() {
                //继续滚动
                autoPlay();

                //去除所有蒙版
                $("li").fadeTo(100, 1);
            });
        });

百叶窗

<script src="js/jquery-1.12.3.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .container {
            width: 800px;
            height: 300px;
            margin: 80px auto;
            position: relative;
            border: 1px solid;
            /* 溢出部分隐藏 */
            overflow: hidden;
        }
        
        .container ul {
            list-style: none
        }
        
        .container li {
            position: absolute
        }
        
        .cover {
            /*制作遮罩层 */
            /* width: 560px; 或*/
            width: 100%;
            height: 300px;
            background: rgba(0, 0, 0, .5);
            position: absolute
        }
        
        .li1 {
            left: 160px;
        }
        
        .li2 {
            left: 320px;
        }
        
        .li3 {
            left: 480px;
        }
        
        .li4 {
            left: 640px;
        }
    </style>

<div class="container">
        <ul>
            <li class="li0">
                <div class="cover"></div>
                <img src="img/0.jpg" alt="" />
            </li>
            <li class="li1">
                <div class="cover"></div>
                <img src="img/1.jpg" alt="" />
            </li>
            <li class="li2">
                <div class="cover"></div>
                <img src="img/2.jpg" alt="" />
            </li>
            <li class="li3">
                <div class="cover"></div>
                <img src="img/3.jpg" alt="" />
            </li>
            <li class="li4">
                <div class="cover"></div>
                <img src="img/4.jpg" alt="" />
            </li>
        </ul>
    </div>

  <script>
        // 获得元素
        var $lis = $('.container li');

        //给li添加进入和移出事件（控制明暗变化）
        // find() 方法返回被选元素的后代元素
        // stop() 方法为被选元素停止当前正在运行的动画
        // fadeOut()用于淡出可见元素
        $lis.mouseenter(function() {
            $(this).find('.cover').stop(true).fadeOut();
        }).mouseleave(function() {
            $lis.stop(true);
            $(this).find('.cover').stop(true).fadeIn();
            $lis.eq(1).animate({
                "left": 160
            }, 500);
            $lis.eq(2).animate({
                "left": 320
            }, 500);
            $lis.eq(3).animate({
                "left": 480
            }, 500);
            $lis.eq(4).animate({
                "left": 640
            }, 500);
        })

        //给li添加事件（控制位置）
        $('.li0').mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                "left": 560
            }, 500);
            $lis.eq(2).animate({
                "left": 620
            }, 500);
            $lis.eq(3).animate({
                "left": 680
            }, 500);
            $lis.eq(4).animate({
                "left": 740
            }, 500);
        })

        $('.li1').mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                "left": 60
            }, 500);
            $lis.eq(2).animate({
                "left": 620
            }, 500);
            $lis.eq(3).animate({
                "left": 680
            }, 500);
            $lis.eq(4).animate({
                "left": 740
            }, 500);
        })

        $('.li2').mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                "left": 60
            }, 500);
            $lis.eq(2).animate({
                "left": 120
            }, 500);
            $lis.eq(3).animate({
                "left": 680
            }, 500);
            $lis.eq(4).animate({
                "left": 740
            }, 500);
        })

        $('.li3').mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                "left": 60
            }, 500);
            $lis.eq(2).animate({
                "left": 120
            }, 500);
            $lis.eq(3).animate({
                "left": 180
            }, 500);
            $lis.eq(4).animate({
                "left": 740
            }, 500);
        })

        $('.li4').mouseenter(function() {
            $lis.stop(true);
            $lis.eq(1).animate({
                "left": 60
            }, 500);
            $lis.eq(2).animate({
                "left": 120
            }, 500);
            $lis.eq(3).animate({
                "left": 180
            }, 500);
            $lis.eq(4).animate({
                "left": 240
            }, 500);
        })
 </script>

轮播一

<style>
        .banner {
            width: 500px;
            height: 300px;
            border: 1px solid lightgray;
            margin: 50px auto;
            overflow: hidden;
            display: flex;
            position: relative;
        }
        
        .banner img {
            width: 100%;
            height: 100%;
        }
        /*
        设置小圆点的容器，利用flex布局使其居中
        */
        
        .banner .points {
            position: absolute;
            color: #fff;
            width: 100%;
            bottom: 10px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* 设置每个小圆点的样式 */
        
        .banner .point {
            background-color: skyblue;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 5px;
            cursor: pointer;
        }
        
        .points .active {
            background-color: #f40;
        }
        /* 制作左右箭头 */
        
        .banner .left-btn,
        .banner .right-btn {
            z-index: 999;
            color: #fff;
            font-weight: 900;
            position: absolute;
            background-color: rgba(0, 0, 0, .2);
            height: 20px;
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin-top: 140px;
        }
        
        .banner .left-btn {
            margin-left: -20px;
        }
        
        .banner .right-btn {
            margin-left: 500px;
            justify-content: center;
        }
    </style>

 <div class="banner">
        <img src="./images/beijing/0.jpg" alt="" data-href='#0'>
        <img src="./images/beijing/1.jpg" alt="" data-href='#1'>
        <img src="./images/beijing/2.jpg" alt="" data-href='#2'>
        <img src="./images/beijing/3.jpg" alt="" data-href='#3'>

        <!--左右箭头-->
        <div class="left-btn">
            <</div>
                <div class="right-btn">></div>


                <!--小圆点-->
                <div class="points">
                    <div class="point active" data-page='0'></div>
                    <div class="point" data-page='1'></div>
                    <div class="point" data-page='2'></div>
                    <div class="point" data-page='3'></div>
                </div>
        </div>

 <script src="./js/jquery-1.12.3.min.js"></script>
        <script>
            $(function() {
                var count = 0; //记录轮播的张数

                var timer = null;

                var time = 2000; //每张轮播的时间  毫秒

                //图片切换
                var imgChange = function() {
                    $('.banner img').first().stop().animate({
                        "margin-left": "-" + 500 * count + "px"
                    }, 500)
                };

                //小圆点切换
                var pointChange = function() {
                    $(".point").removeClass('active'); //排他操作
                    $(".point[data-page='" + count + "']").addClass('active');
                }

                //周期切换图片与小圆点
                var timerStart = function() {
                    clearInterval(timer); //开始之前先清除
                    timer = setTimeout(function() {
                        count++;
                        count = count % 4;
                        imgChange();
                        pointChange();
                    }, time)
                };

                //点击小圆点切换对应的图片
                $(".banner .point").click(function() {
                    count = parseInt($(this).attr("data-page"));
                    imgChange();
                    pointChange();
                    timerStart();
                })

                //当点击左右时，实现切换
                $(".banner .left-btn").click(function() {
                    count--;
                    count = count < 0 ? 0 : count;
                    imgChange();
                    pointChange();
                    timerStart();
                })

                $(".banner .right-btn").click(function() {
                    count++;
                    count %= 4;
                    imgChange();
                    pointChange();
                    timerStart();
                })


                //当鼠标移入banner区域时左右按钮显示，反之隐藏
                $(".banner").mouseenter(function() {
                    $(".banner .left-btn").stop().animate({
                        "margin-left": "0px"
                    }, 500)

                    $(".banner .right-btn").stop().animate({
                        "margin-left": "480px"
                    }, 500)
                })

                $(".banner").mouseleave(function() {
                    $(".banner .left-btn").stop().animate({
                        "margin-left": "-20px"
                    }, 500)

                    $(".banner .right-btn").stop().animate({
                        "margin-left": "500px"
                    }, 500)
                })

                timerStart();

            })
</script>

轮播二

 <link rel="stylesheet" href="css/indexjQuery.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/indexJquery.js"></script>

 <div id="container">
        <div id="list" style="left: -600px;">
            <img src="img/5.jpg" alt="1" />
            <img src="img/1.jpg" alt="1" />
            <img src="img/2.jpg" alt="2" />
            <img src="img/3.jpg" alt="3" />
            <img src="img/4.jpg" alt="4" />
            <img src="img/5.jpg" alt="5" />
            <img src="img/1.jpg" alt="5" />
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    padding: 20px;
}

#container {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
    margin: 45px auto;
}

#list {
    width: 4200px;
    height: 400px;
    position: absolute;
    z-index: 1;
}

#list img {
    float: left;
}


/* 小圆点区域 */

#buttons {
    position: absolute;
    height: 10px;
    width: 100px;
    z-index: 2;
    bottom: 20px;
    left: 250px;
}

#buttons span {
    cursor: pointer;
    float: left;
    border: 1px solid #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    margin-right: 5px;
}

#buttons .on {
    background: orangered;
}


/* 按钮区域 */

.arrow {
    cursor: pointer;
    display: none;
    line-height: 39px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 2;
    top: 180px;
    background-color: RGBA(0, 0, 0, .3);
    color: #fff;
}

.arrow:hover {
    background-color: RGBA(0, 0, 0, .7);
}

#container:hover .arrow {
    display: block;
}

#prev {
    left: 20px;
}

#next {
    right: 20px;
}

$(function() {
    //获取元素
    var container = $('#container');
    var list = $('#list');
    var buttons = $('#buttons span');
    var prev = $('#prev');
    var next = $('#next');

    var index = 1; //存放当前显示的图片的下标
    var len = 5;
    var interval = 3000; //位移时间间隔
    var timer;


    function animate(offset) {
        var left = parseInt(list.css('left')) + offset;

        // 边界判断
        if (offset > 0) {
            offset = '+=' + offset;
        } else {
            offset = '-=' + Math.abs(offset);
        }

        list.animate({ 'left': offset }, 300, function() {
            if (left > -200) {
                list.css('left', -600 * len);
            }
            if (left < (-600 * len)) {
                list.css('left', -600);
            }
        });
    }

    //亮起小圆点
    function showButton() {
        //当前图片的小圆点亮起，其他小圆点不亮
        buttons.eq(index - 1).addClass('on').siblings().removeClass('on');
    }

    // 鼠标离开图片区域时，轮播继续
    function play() {
        timer = setTimeout(function() {
            next.trigger('click');
            play();
        }, interval);
    }

    //鼠标进入图片区域时，停止轮播
    function stop() {
        clearTimeout(timer);
    }

    // 右按钮点击事件
    next.bind('click', function() {
        // 判断当前是否在动画
        if (list.is(':animated')) {
            return;
        }

        // 判断当前图片是否是最后一张
        if (index == 5) {
            index = 1;
        } else {
            index += 1;
        }

        animate(-600);
        showButton();
    });

    // 左按钮事件
    prev.bind('click', function() {
        // 判断当前是否在动画
        if (list.is(':animated')) {
            return;
        }

        // 判断当前图片是否是第一张
        if (index == 1) {
            index = 5;
        } else {
            index -= 1;
        }

        animate(600);
        showButton();
    });

    // 小圆点点击事件
    buttons.each(function() {
        $(this).bind('click', function() {
            // 判断当前是否在进行动画
            if (list.is(':animated') || $(this).attr('class') == 'on') {
                return;
            }
            // 获取属性
            var myIndex = parseInt($(this).attr('index'));

            //计算偏移量
            var offset = -600 * (myIndex - index);

            animate(offset);

            //切换后，更新当前的偏移量
            index = myIndex;

            showButton();
        })
    });

    container.hover(stop, play);

    play();

});

轮播三

核心：

旧的图片淡出、新的图片淡入
鼠标单击左右按钮，图片进行左右切换
鼠标点击相应的锚点，图片就自动切换到锚点对应的图片
但鼠标既没有单击左右按钮也没有单击锚点时，图片就按一定周期自动循环轮播

<script src="js/jquery-1.12.3.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }
        
        .swiper {
            width: 560px;
            height: 300px;
            border: 1px solid;
            margin: 80px auto;
            position: relative
        }
        
        .swiper .imgURL {
            list-style: none;
            padding: 0
        }
        
        .swiper .imgURL li {
            position: absolute;
            display: none
        }
        
        .swiper .imgURL .selectLi {
            display: block
        }
        
        .leftBtn,
        .rightBtn {
            position: absolute;
            width: 30px;
            height: 50px;
            background-color: rgba(0, 0, 0, .3);
            font-size: 25px;
            top: 40%;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        
        .rightBtn {
            right: 0
        }
        
        .leftBtn:hover,
        .rightBtn:hover {
            color: #fff;
            background-color: rgba(0, 0, 0, .5);
        }
        
        .swiper .maodianUl {
            list-style: none;
            position: absolute;
            padding: 0;
            bottom: 10px;
            left: 35%;
        }
        
        .swiper .maodianUl li {
            display: inline-block;
            width: 22px;
            height: 22px;
            background-color: orange;
            text-align: center;
            line-height: 22px;
            border-radius: 50%;
        }
        
        .swiper .maodianUl .selectMaoDian {
            background-color: purple
        }
        
        .swiper .maodianUl li a {
            text-decoration: none;
            color: white
        }
</style>

 <div class="swiper">
        <ul class="imgURL">
            <li class="selectLi">
                <a href="#"><img src="img/0.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="img/1.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="img/2.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="img/3.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="img/4.jpg" alt="" /></a>
            </li>
        </ul>
        <div class="leftBtn">
            <</div>
                <div class="rightBtn">></div>
                <ul class="maodianUl">
                    <li class="selectMaoDian"><a href="#">0</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
        </div>

 <script>
            //获得元素
            var $leftBtn = $('.leftBtn');
            var $rightBtn = $('.rightBtn');
            //获取页面中所有的图片li
            var $lis = $('.imgURL li');
            //获取所有锚点的li
            var $maodians = $('.maodianUl li')

            //表示当前显示的li的序号
            var index = 0;

            var timer = null;

            $rightBtn.click(function() {
                //防止动画积累的方法：只要jq对象在执行动画，就忽略任何的触发
                if ($lis.is(':animated')) {
                    return;
                }
                //旧的怎么样，新的怎么样
                $lis.eq(index).fadeOut();

                $maodians.eq(index).removeClass('selectMaoDian');

                index++;

                //当已经时最后一张时，点击切换到第一张
                if (index == 5) {
                    index = 0;
                }

                //新的淡入
                $lis.eq(index).fadeIn();

                $maodians.eq(index).addClass('selectMaoDian');
            });

            $leftBtn.click(function() {
                //防止动画积累的方法：只要jq对象在执行动画，就忽略任何的触发
                if ($lis.is(':animated')) {
                    return;
                }

                $lis.eq(index).fadeOut();
                $maodians.eq(index).removeClass('selectMaoDian');

                index--;

                //当已经时最后一张时，点击切换到第一张
                if (index == -1) {
                    index = 4;
                }
                $lis.eq(index).fadeIn();
                $maodians.eq(index).addClass('selectMaoDian');
            })

            //锚点添加事件
            $maodians.mouseenter(function() {
                //旧的淡出，并给锚点取消背景
                $lis.eq(index).fadeOut();
                $maodians.eq(index).removeClass('selectMaoDian');

                //index()方法返回当前节点在兄弟节点中的序号，从0开始计算。
                index = $(this).index();

                //console.log(index);

                //新的淡入，并给锚点添加背景
                $lis.eq(index).fadeIn();
                $maodians.eq(index).addClass('selectMaoDian');
            });

            //自动播放(定时器)
            timer = setInterval(function() {
                //防止动画积累的方法：只要jq对象在执行动画，就忽略任何的触发
                if ($lis.is(':animated')) {
                    return;
                }

                //旧的怎么样，新的怎么样
                $lis.eq(index).fadeOut();
                $maodians.eq(index).removeClass('selectMaoDian');

                index++;

                //当已经时最后一张时，点击切换到第一张
                if (index == 5) {
                    index = 0;
                }

                $lis.eq(index).fadeIn();
                $maodians.eq(index).addClass('selectMaoDian');
            }, 3000);
  </script>