jQuery实现左右轮播----带轮播图片说明

最新推荐文章于 2025-07-04 14:37:40 发布

蔡馨

最新推荐文章于 2025-07-04 14:37:40 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端学习

本文链接：https://blog.youkuaiyun.com/weixin_42805130/article/details/82495613

web前端学习专栏收录该内容

63 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的图片轮播效果，包括左右切换按钮、自动播放、鼠标悬停显示按钮及通过小圆点指示当前图片等功能。代码详细展示了如何设置图片宽度、位置动画以及小圆点指示器的动态更新。

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

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="public/jquery-1.12.4.min.js"></script>
    <title>图片轮播jq(左右切换)</title>
    <style>
        *{margin: 0;padding:0; }
        ul{list-style: none;}
        .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;z-index: 1;}
        .img{position: absolute;top: 0;left: 0;}
        .des{position: absolute;bottom: 0;left: 0;z-index: -2;background: rgba(0,0,0,.4)}
        .des li{float: left;width: 600px;}
        .img li{float: left;}
        .num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}
        .num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}
        .btn{display: none;}
        .btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}
        .btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
        .btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
        .num .active{background-color: #fff;}
        .hide{display: none;}
    </style>
</head>
<body>
<div class="banner">
    <ul class="img">
        <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第1张图片"></a></li>
        <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第2张图片"></a></li>
        <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第3张图片"></a></li>
        <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第4张图片"></a></li>
        <li><a href="#"><img width="600" height="300" src="img/1.jpg" alt="第5张图片"></a></li>
    </ul>
    <ul class="num"></ul>
    <ul class="des">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
        <li>第一个</li>
    </ul>
    <div class="btn">
        <span class="prev"><</span>
        <span class="next">></span>
    </div>

</div>

<script>

    $(function(){

        var i=0;
        var timer=null;
        for (var j = 0; j < $('.img li').length; j++) { //创建圆点
            $('.num').append('<li></li>')
        }
        $('.num li').first().addClass('active'); //给第一个圆点添加样式

        var firstimg=$('.img li').first().clone(); //复制第一张图片
        $('.img').append(firstimg).width($('.img li').length*($('.img img').width()));
        //第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度

        $('.des').width($('.img li').length*($('.img img').width()));
        //对点点位置的文字描述的宽度和图片一样


        // 下一个按钮
        $('.next').click(function(){
            i++;
            if (i==$('.img li').length) {
                i=1; //这里不是i=0
                $('.img').css({left:0}); //保证无缝轮播，设置left值
            };

            $('.img').stop().animate({left:-i*600},300);//图片宽度为600

            if (i==$('.img li').length-1) { //设置小圆点指示
                $('.num li').eq(0).addClass('active').siblings().removeClass('active');
                $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
            }else{
                $('.num li').eq(i).addClass('active').siblings().removeClass('active');
                $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
            }

        })

        // 上一个按钮
        $('.prev').click(function(){
            i--;
            if (i==-1) {
                i=$('.img li').length-2;
                $('.img').css({left:-($('.img li').length-1)*600});
            }
            $('.img').stop().animate({left:-i*600},300);
            $('.num li').eq(i).addClass('active').siblings().removeClass('active');
            $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
        })

        //设置按钮的显示和隐藏
        $('.banner').hover(function(){
            $('.btn').show();
        },function(){
            $('.btn').hide();
        })

        //鼠标划入圆点
        $('.num li').mouseover(function(){
            var _index=$(this).index();
            $('.img').stop().animate({left:-_index*600},150);
            $('.num li').eq(_index).addClass('active').siblings().removeClass('active');
            $('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');
        })

        //定时器自动播放
        timer=setInterval(function(){
            i++;
            if (i==$('.img li').length) {
                i=1;
                $('.img').css({left:0});
            };

            $('.img').stop().animate({left:-i*600},300);
            if (i==$('.img li').length-1) {
                $('.num li').eq(0).addClass('active').siblings().removeClass('active');
                $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
            }else{
                $('.num li').eq(i).addClass('active').siblings().removeClass('active');
                $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
            }
        },1000)

        //鼠标移入，暂停自动播放，移出，开始自动播放
        $('.banner').hover(function(){
            clearInterval(timer);
        },function(){
            timer=setInterval(function(){
                i++;
                if (i==$('.img li').length) {
                    i=1;
                    $('.img').css({left:0});
                };

                $('.img').stop().animate({left:-i*600},300);
                if (i==$('.img li').length-1) {
                    $('.num li').eq(0).addClass('active').siblings().removeClass('active');
                    $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
                }else{
                    $('.num li').eq(i).addClass('active').siblings().removeClass('active');
                    $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
                }
            },1000)
        })

    })
</script>

</body>
</html>

说明：轮播代码动画部分还有繁琐之处，希望大神们指点一二