计时器实现js轮播图的暂停与继续

本文介绍了如何利用JavaScript的计时器实现轮播图的自动播放,并通过绑定鼠标悬停事件来实现轮播图的暂停与继续功能。详细步骤包括将定时器封装到autoMove函数,鼠标进入时清除计时器,鼠标离开时重新启动计时器。

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

轮播图的暂停与继续


首先,使用定时器实现轮播效果,然后将定时器封装到autoMove函数中;然后执行autoMove();进行调用,

autoMove();

然后绑定鼠标进入进入事件,清空计时器;

例如:

$("#ad").mouseenter(function(){
				clearInterval(timer)
			})

然后再次启动计时器:

$("#ad").mouseleave(function(){
                autoMove();
            })

实现代码:图片代码后边自取

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝广告</title>
	<style>
		*{margin:0;padding:0}
		#ad{
			width: 250px;
			height: 250px;
			border: 1px solid #edafab;
			margin:100px auto 0;
			overflow:hidden;
		}
		#ad ol{
			width: 49px;
			border-right: 1px solid #edafab;
			float: left;
		}
		#ad ol li{
			list-style-type:none;
			height: 27px;
			border-bottom: 1px solid #edafab;
			line-height: 27px;
			text-align: center;
			font-size: 12px;
			background-color: #fcf2f1;
			cursor:pointer;
		}
		#ad ol li.on{
			background: url('images/60/bg.gif');
		}
		a{
			display: inline-block;
		}
		#ad ul{
			list-style: none;
			/* list-style-type:none; */
			float: left;
		}
		/* #ad ul li{
			display:none;
		} */
		#ad ul li.on{
			display:block;
			
		}
	</style>
	
</head>
<body>
	<div id="ad">
		<ol>
			<li class="on">女靴</li>
			<li>雪地靴</li>
			<li>冬裙</li>
			<li>呢大衣</li>
			<li>毛衣</li>
			<li>棉服</li>
			<li>女裤</li>
			<li>羽绒服</li>
			<li>牛仔裤</li>
		</ol>
		<ul>
			<li class="on"><a href=""><img src="./images/60/女靴.jpg" alt=""></a></li>
			<li><a href=""><img src="./images/60/雪地靴.jpg" alt=""></a></li>
			<li><a href=""><img src="./images/60/冬裙.jpg" alt=""></a></li>
			<li><a href=""><img src="./images/60/呢大衣.jpg" alt=""></a></li>
			<li><a href=""><img src="./images/60/毛衣.jpg" alt=""></a></li>
			<li><a href=""><img src="./images/60/棉服.jpg" alt=""></a></li>
			<li><a href=""><img src="./images/60/女裤.jpg" alt=""></a></li>
			<li><a href=""><img src="./images/60/羽绒服.jpg" alt=""></a></li>
			<li><a href=""><img src="./images/60/牛仔裤.jpg" alt=""></a></li>
		</ul>
	</div>
	<script src="jquery-1.11.3.min.js"></script>
	<script>
		$(function(){
			
		var timer = null;
		function autoMove(){
			let c=1
		    let imgs = document.getElementsByTagName("img").length
			
			timer=setInterval(function(){
			let a=parseInt($("ul").css("marginTop"))
				let uh = $("ul").height()
				if(c>=imgs){
					c=0
					$("ul").animate({marginTop:-254*c},0)
					$("ol li").eq(c).attr("class","on").siblings().attr("class","")
					c=1
			}else{
				$("ol li").eq(c).attr("class","on").siblings().attr("class","")
				$("ul").animate({marginTop:-254*c},0)
				c++;
			}
			},1000);
		}
		autoMove();
			$("#ad").mouseenter(function(){
				clearInterval(timer)
			}).mouseleave(function(){
				autoMove();
			})
		})
	</script>
</body>
</html>

图片:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
按钮背景图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值