关于mouseover的问题

来源：1-13 作业题

Coolyang_

2018-03-05 22:17:58

如果鼠标停留在轮播图上,按F5刷新网页,如果保持鼠标不动,那么图片会自动轮播,除非移动一次鼠标才会停止.可以参考这个问题http://class.imooc.com/course/qadetail/39626

而页面第一次打开时,也会因为页面加载缓慢而出现定时器失效的情况

如图,轮播时控制台打印数字,清除定时器时打印clear.在此期间,我鼠标从未移开图片并且保持移动,可以看到,每次打印clear之后,图片轮播并没有停止,在图片切换到下一张之后,又打印了一次clear,然而图片仍然继续轮播.在控制台上呈现的结果就是,clear和数字不断的轮流打印.

当页面刷新后,然后移动鼠标,恢复正常.

		// 鼠标不在banner区图片自动轮播
		banner.mouseout(function(){
			timer = setInterval(function(){
				index++;
				//console.log(img.length);
				
				// 切换图片
				changeImg();
			},2000)
		});

		// 鼠标在banner上停止轮播
		banner.mouseover(function() {
			console.log('clear');
			if (timer) {
				// 清除定时器
				clearInterval(timer);
			}
		});
		
		// 启动自动轮播
		banner.mouseout();

写回答

5回答

一路电光带火花

2018-03-06

已采纳

你可以在这上面清除一下定时器，再测试下

另外banner里面的图片div不需要定位，把定位去掉

hoolyang_

h 非常感谢！

h018-03-06

共1条回复

小丸子爱吃菜

2018-03-06

1、在这个轮播效果中，我们触发的是鼠标移动和鼠标离开事件，如果鼠标放在图片上不动，用F5刷新的话，是触发不了事件的，这就得需要去判断鼠标的位置来决定是否启动轮播。鼠标的位置相关知识会在后面进阶的路径中去讲解，有兴趣可以网上查阅一下鼠标位置的相关知识，自己完善一下。

2、测试你的代码，鼠标一直在图片上方滑动，并没有出现你说的那种情况啊

hoolyang_

h 已经解决,谢谢

h018-03-06

共2条回复

Coolyang_

提问者

2018-03-06

!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery实现轮播图</title>
    <link rel="stylesheet" href="css/jQuery实现轮播图.css">
</head>
<body>
    <div class="box">
        <p>jQuery实现轮播图</p>
        <div class="banner">
            <!-- 图片轮播 -->
            <div class="img one block"><a href="#"></a></div>
            <div class="img two"><a href="#"></a></div>
            <div class="img three"><a href="#"></a></div>
            <div class="img four"><a href="#"></a></div>
            <div class="img five"><a href="#"></a></div>
    
            <!-- 小圆点 -->
            <div class="dots">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <!-- 三角 -->
            <a href="javascript:;" class="button prve"></a>
            <a href="javascript:;" class="button next"></a>
    </div>
    
    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="js/jQuery实现轮播图.js"></script>
</div>
</body>
</html>

body {
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei";
}

p {
	text-align: center;
	font-size: 20px;
}

.banner {
	width: 1200px;
	height: 500px;
	position: relative;
	padding: 10px;
	background-color: #bbb;
	margin: 0 auto;
}

.img {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 1200px;
	height: 500px;
	background-repeat: no-repeat;
	background-size: 1200px 500px;
	overflow: hidden;
	display: none;
}

.one {
	background-image: url("../img/1.jpg");
}
.two {
	background-image: url("../img/2.jpg");
}

.three {
	background-image: url("../img/3.jpg");
}

.four {
	background-image: url("../img/4.jpg");
}

.five {
	background-image: url("../img/5.jpg");
}

.block {
	display: block;
}

.dots {
	position: absolute;
	right: 20px;
	bottom: 30px;
}

.dots span {
	display: inline-block;
	width: 12px;
	height: 12px;
	border:2px solid #fff;
	border-radius: 50%;
	background-color: #666;
	margin-right: 3px;
	cursor: pointer;
}

.dots .active {
	border:2px solid #666;
	background-color: #fff;
}

.button {
	display: block;
	position: absolute;
	top: 50%;
	left: 30px;
	margin-top: -40px;
	width: 30px;
	height: 80px;
	background-repeat: no-repeat;
	background-position: center center;
}

.button:hover {
	background-color: rgba(0,0,0,0.5);
}
.prve {
	background-image: url("../img/pre2.png");
}
.next {
	left: auto;
	right: 30px;
	background-image: url("../img/pre.png");
}

$(function() {
	var index = 0,
		timer = null,
		img = $('.img'),
		banner = $('.banner'),
		dots = $('span'),
		button = $('.button');
	// 封装图片轮播函数 
	function bannerSlide() {

		// 鼠标不在banner区图片自动轮播
		banner.mouseout(function(){
			timer = setInterval(function(){
				index++;		
				// 切换图片
				changeImg();
			},2000)
		});


		// 鼠标在banner上停止轮播
		banner.mouseover(function() {
			
			if (timer) {
				// 清除定时器
				clearInterval(timer);
				console.log('clear');
			}
		});
		
		// 启动自动轮播
		banner.mouseout();

		// 点击小圆点切换图片
		dots.click(function(event){
			// 令索引值等于点击的小圆点的索引
			index = dots.index($(this));
			changeImg();
		})

		// 点击三角切换图片
		button.eq(0).click(function(event){
			// 索引-1
			index--;
			changeImg();
		});
		button.eq(1).click(function(event){
			// 索引+1
			index++;
			changeImg();
		});

	}

	// 封装图片切换函数
	function changeImg() {
		// 判断index大小,如果超过图片数目则归零,如果小于图片数目则变最大值
		if (index >= img.length) {
			index = 0;
		}
		if (index < 0) {
			index = img.length-1;
		}
		console.log(index);

		// 清除所有的激活样式
		img.removeClass('block');
		dots.removeClass('active');

		//切换图片
		img.eq(index).addClass('block');
		dots.eq(index).addClass('active');
	}
	
	bannerSlide();
})