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

最新推荐文章于 2023-10-08 16:25:24 发布

sky_to_heaven

最新推荐文章于 2023-10-08 16:25:24 发布

阅读量1.3k

点赞数

分类专栏：个人前端学习总结文章标签： jquery javascript

本文链接：https://blog.csdn.net/sky_to_heaven/article/details/107732786

版权

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

摘要由CSDN通过智能技术生成

轮播图的暂停与继续

首先，使用定时器实现轮播效果，然后将定时器封装到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>