JQuery实现图片自动轮播左右切换鼠标移入

首先 轮播的精髓就是在于图片的平滑滚动,下面图片应该能一下就看明白;

第一 我们将可视区控制在我们想呈现的内容的大小
第二 接着是在可视区内放入内容(图片);
第三 JQ效果实现 ,

中下方小圆点(按钮移入切换事件);
图片左右两侧点击切换事件;
自动播放事件;
移入图片终止播放移出开启播放;

在这里插入图片描述

css 以及 html 展示

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

        li {
            list-style: none;
        }

        img {
            display: block;
        }

        #banner {
            width: 800px;
            height: 533px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        #banner img {
            width: 800px;
            height: 533px;
        }

        #banner .pic {
            position: absolute;
            left: 0;
            top: 0;
            width: 3200px;
        }

        #banner .pic li {
            float: left;
        }

        #banner .btn {
            position: absolute;
            left: 50%;
            bottom: 50px;
            transform: translateX(-50%);
        }

        #banner .btn li {
            float: left;
            width: 20px;
            height: 20px;
            background-color: #ccc;
            margin: 0 5px;
            border-radius: 50%;
            font-size: 0;
        }

        #banner .btn .active {
            background-color: orangered;
        }

        #banner .LRbtn {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
        }

        .LRbtn span {
            float: left;
            width: 30px;
            height: 30px;
            background-color: rgba(255, 255, 255, 0.5);
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            color: black;
            cursor: pointer;
        }

        #banner .LRbtn .right {
            float: right;
        }
    </style>
</head>
<body>
<div id="banner">
    <ul class="pic">
    /* 图片这里用的百度壁纸在线图片 可自行更换为自己本地或去图库复制在线图片地址*/
              <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201306%2F23%2F110328s72xxse7lfis9fnd.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634349477&t=563102829f4ca7e9b0d271bfcfdbf786"
                     alt="" /></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F6159252dd42a28348c779b1b58b5c9ea14cebfc9.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634349477&t=a83d49c2dcaccbfc917770d883087f32"
                     alt="" /></li>
            <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F1e30e924b899a90151fa90991f950a7b0308f556.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634349477&t=b676c97b953d97565dcc882b7cae07db"
                     alt="" /></li>
            <li><img src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/cf1b9d16fdfaaf51147b13c38e5494eef01f7a36.jpg"
                     alt="" /></li>
    </ul>
    <ul class="btn">
        <li class="active"></li>	
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="LRbtn">
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
    </div>
</div>

</body>

样式呈现效果
在这里插入图片描述
JQuery代码呈现

  		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  		<script>
  			var index = 0;       
  			 //  定义一个初始值
            var picwidth = $('.pic li img').width();    
               // 一张图片的宽度
            var   timer = '';                                      
              //声明一个定时器

            $('.btn li').mouseenter(function(){         
                //小按钮移入事件
                index = $(this).index()-1;             
                 // 减一是因为move 函数自身+1;
                move();			
                	//move()方法最在下方
            });

            timer = setInterval(move,1000);    //  自动播放

            $('.left').click(function () {    
             //点击切换   左
                index -= 2;
                move();
            });
            $('.right').click(function () {   
            //点击切换   右
                move();
            });

            function move() {                //运动函数
                index++ ;
                if (index < 0) {   //当状态值时为0时  使图片跳转到最后张图
                    index = 3;
                    $('.pic').stop().animate({'left': -index * picwidth})
                }
                if (index == 4) {//当状态值时为4时  使图片跳转到第一张图
                    index = 0;
                    $('.pic').stop().animate({'left': 0})
                }
                  // ul 宽度随状态值切换
                $('.pic').stop().animate({'left': -index * picwidth}) ;
                   //  小按钮类名随状态值切换
                $('#banner .btn li').removeClass('active').eq(index).addClass('active') ;   
            }
            	 // 移入清除定时器 //移出开始定时器
			$('#banner').hover(function(){   clearInterval(timer);},function(){   timer = setInterval(move,1000);});
			</script>

以上就是Jquery实现轮播图的步骤与原理。

  • 6
    点赞
  • 54
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

词不达意难知

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值