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

最新推荐文章于 2024-07-10 03:39:12 发布

原创最新推荐文章于 2024-07-10 03:39:12 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

个人前端学习总结专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何利用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>