轮播图异常
老师,为什么js文件里面50-52行删掉轮播图会出现异常
异常:浏览器窗口大小手动改变后(就是用鼠标把浏览器窗体大小拉宽、拉长那种改变),轮播图播放速度会变得很快,我主要是想实现鼠标移入轮播图不会暂停播放图片
删掉的代码如下
//绑定鼠标移入,暂停播放图片
benner.onmouseover = function() {
clearInterval(auto);
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="js.js"></script>
<title>Document</title>
</head>
<body>
<div id="benner">
<div class="img">
<img src="http://www.jq22.com/img/cs/500x300-1.png" class="imga active">
<img src="http://www.jq22.com/img/cs/500x300-2.png" class="imga">
<img src="http://www.jq22.com/img/cs/500x300-3.png" class="imga">
<img src="http://www.jq22.com/img/cs/500x300-4.png" class="imga">
<img src="http://www.jq22.com/img/cs/500x300-5.png" class="imga">
<img src="http://www.jq22.com/img/cs/500x300-6.png" class="imga">
<img src="http://www.jq22.com/img/cs/500x300-7.png" class="imga">
</div>
<ul class="title">
<li class="nr active"></li>
<li class="nr"></li>
<li class="nr"></li>
<li class="nr"></li>
<li class="nr"></li>
<li class="nr"></li>
<li class="nr"></li>
</ul>
</div>
</body>
</html>
css
* {
margin:0px;
padding:0px;
}
#benner {
width:790px;
height:340px;
margin-left:15%;
margin-top:10px;
}
#benner .imga {
display:none;
}
#benner .img .active {
display:block;
}
#benner .title {
width:;
height:16px;
background-color:rgba(226,226,226,0.6);
border-radius:30px;
margin-top:-35px;
float:left;
margin-left:40%;
margin-right:40%;
padding:6px 0px 0px 10px;
position:relative;
}
#benner .title .nr {
list-style:none;
width:10px;
height:10px;
background:#fff;
border-radius:10px;
float:left;
margin-right:10px;
margin-bottom:0px;
}
#benner .title .active {
background:#db192a;
}
js
window.onload = function() {
benner('#benner', '.nr', '.imga')
function benner(parent, controller, mod) {
var num = 0;
var controller = $(controller);
var mod = $(mod);
var benner = $(parent);
var autoPlayTime = 1500;
var imgNum = mod.length - 1;
var auto;
autoPlay();
//根据传进来的名字获取这个名字所对应的对象
function $(name) {
if (name[0] == '#') {
return document.getElementById(name.substr(1));
} else if (name[0] == '.') {
return document.getElementsByClassName(name.substr(1));
} else {
return document.getElementsByTagName(name);
}
}
//实现鼠标划过圆点,变化图片的效果
//function change(controller, mod){
//遍历控制器,绑定鼠标划过事件
for (var i = 0; i < controller.length; i++) {
//给控制器加个索引,并把i值赋值给索引
controller[i].index = i;
//给所有的控制器都加划过事件
controller[i].onmouseover = function() {
for (var j = 0; j < controller.length; j++) {
//将所有控制器改为默认样式
controller[j].className = 'nr';
}
//改变所选的控制器样式
this.className = 'nr active';
//将模型改为默认样式
for (var x = 0; x < mod.length; x++) {
mod[x].className = 'imga';
}
//改变所选控制器对应的模型的样式
mod[this.index].className = 'imga active';
}
}
//}
//绑定鼠标移入,暂停播放图片
benner.onmouseover = function() {
clearInterval(auto);
}
//绑定鼠标离开,继续播放
benner.onmouseleave = function() {
autoPlay();
}
//指定播放那个图片
function play(num) {
for (var j = 0; j < controller.length; j++) {
controller[j].className = 'nr';
}
controller[num].className = 'nr active';
for (var x = 0; x < mod.length; x++) {
mod[x].className = 'imga';
}
mod[num].className = 'imga active';
}
//自动播放
function autoPlay() {
auto = setInterval(function() {
if (num > imgNum) {
num = 0;
}
play(num);
num++;
}, autoPlayTime)
}
}
}
图片均为网络超链接,无需本地图片
路径关系:

8
收起
正在回答
1回答
同学你好,这段代码删掉后,轮播图出现异常,与手动改变浏览器窗口大小没关系,原因在于当删掉鼠标移入事件时,鼠标移出事件没有相应删除,当鼠标移入又移出轮播图时,会不断触发鼠标移出事件,进而不断开启定时器,导致轮播图出现异常。建议参考以下修改
祝学习愉快!
相似问题
登录后可查看更多问答,登录/注册
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星