使用计时器模拟电商平台图片滚动效果

这里采用4张图片做效果展示：
利用到鼠标事件：
mouseenter（）鼠标经过事件（鼠标经过图片停止计时）
mouseleave（）鼠标离开事件 （鼠标离开图片继续计时）

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		//导入jQuery
		<script src="../js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	
	<body>
		<img id="img" src="../img/a.jpg" style="width: 600px; height: 480px; margin-left: 300px;"/>
				
			
		<script type="text/javascript">
		//将4张图片存放在数组中
			var image_list = ["../img/a.jpg","../img/b.jpg","../img/c.jpg","../img/d.jpg"]
			var i = 0
			$("#img").mouseleave(
				function  () {	
				//计时器，每隔3秒更换图片			
					Inter=setInterval(
					function  () {
					//判断获取索引
						if (i > 2) {
							i = 0
						} else{
							i++
						}
						console.log(i)
						var img = image_list[i]
						//利用attr属性来修改标签的src属性（路径）
						$("#img").attr("src",img)
						
					},
					3000
					)
			})
			
			$("#img").mouseenter(
				function  () {
				//清除计时器
					clearInterval(Inter);
				}
				
			)

		</script>
	</body>
</html>

在这里插入图片描述

posted @ 2019-06-11 22:26  Python及时行乐  阅读(260)  评论(0)  编辑  收藏  举报