关于mouseover的问题
如果鼠标停留在轮播图上,按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();28
收起
正在回答
5回答
你可以在这上面清除一下定时器，再测试下
另外banner里面的图片div不需要定位，把定位去掉
Coolyang_
2018-03-06 13:42:04
!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();
})
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星