老师，为什么我鼠标放在右下角的导航圆点和上一张下一张的按钮上时，banner图片依然在进行轮播

来源：1-13 作业题

ZIONT126

2018-09-27 01:57:06

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	*{
	margin: 0;
	padding: 0;
}
.main{
	width: 1200px;
	height: 460px;
	border:5px solid #bbb;
	margin: 0 auto;
	position: relative;
}
/*--banner--*/
.banner{
	width: 1200px;
	height: 460px;
	position: relative;
}
.sub-ban{
	width: 1200px;
	height: 460px;
	position: absolute;
	display: none;
}
.pic1{
	background: url(../1.jpg) no-repeat ;
}
.pic2{
	background: url(../2.jpg) no-repeat ;
}
.pic3{
	background: url(../3.jpg) no-repeat ;
}
.pic4{
	background: url(../4.jpg) no-repeat ;
}
.pic5{
	background: url(../5.jpg) no-repeat ;
}
.ban-active{
	display: block;
}
/*--button--*/
.button{
	width: 30px;
	height: 50px;
	position: absolute;
	top: 50%;
}
.button:hover{
	background-color: #666;
	opacity: 0.5;
}
.left{
	background: url(../pre2.png) no-repeat center center;
	margin-top: -25px;
}
.right{
	background: url(../pre.png) no-repeat center center;
	right: 0;
	margin-top: -25px;
}
/*导航圆点*/
.dots{
	width: 130px;
	height: 25px;
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.sub-dot{
	width: 10px;
	height:10px;
	border:3px solid #969696;
	background-color: #fff;
	border-radius: 50%;
	float: left;
	margin: 5px;
}
.dot-active{
	border:3px solid #fff;
	background-color: #969696;
}</style>
</head>
<body>
<div class="main">
	<!-- 导航图 -->
	<div class="banner">
		<div class="sub-ban pic1 ban-active">1</div>
		<div class="sub-ban pic2">2</div>
		<div class="sub-ban pic3">3</div>
		<div class="sub-ban pic4">4</div>
		<div class="sub-ban pic5">5</div>
	</div>

	<!-- 左右箭头 -->

	<div class="button left"></div>
	<div class="button right"></div>

	<!-- 导航圆点 -->

	<div class="dots">
		<span class="sub-dot dot-active"></span>
		<span class="sub-dot"></span>
		<span class="sub-dot"></span>
		<span class="sub-dot"></span>
		<span class="sub-dot"></span>
	</div>
</div>

<!-- javaScript -->
 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
	$(function(){
	var main=$('.main');
	var banner=$('.banner');
	var subBan=$('.sub-ban');
	var dots=$('.dots');
	var subDot=$('.sub-dot');
	var left=$('.left');
	var right=$('.right');
	var timer;
   	var i=0;
   	var banLen=subBan.length;


   	// 鼠标移除图片开始轮播图片
	banner.on('mouseleave',function(event){
		timer=setInterval(function(){
			i++;
			if(i>=banLen){
				i=0;
			}
			changeImg();
			
		},2000)
	}).trigger('mouseleave');//打开页面自动轮播图片
	
	//鼠标在图片上停止轮播
	banner.on('mouseenter',function(){
		clearInterval(timer);
	})

	//点击圆点切换图片
	subDot.on('click',function(event){
		i=$(this).index();
		changeImg();
	})

	//点击下一张按钮切换图片
	right.on('click',function(){
		i++;
		if(i>=banLen){
			i=0;
		}
		changeImg();
	})

	//点击上一张按钮切换图片
	left.on('click',function(){
		i--;
		if(i<0){
			i=banLen-1;
		}
		changeImg();
	})

	//切换图片
	function changeImg(){
		subBan.removeClass('ban-active');
		subDot.removeClass('dot-active');
		$(subBan.eq(i)).addClass('ban-active');
		$(subDot.eq(i)).addClass('dot-active');
	}




})
</script>
</body>
</html>

老师，为什么我鼠标放在右下角的导航圆点和上一张下一张的按钮上时，banner图片依然在进行轮播，我只有在subDot.on()，left.on()，right.on() 里面加上clearInterval(timer);才能停止轮播，有什么好的方法让鼠标在这些导航按钮上可以停止banner图片轮播？

写回答

1回答