两个问题麻烦老师帮我看一下
1.进入后没有直接开始轮播，需要鼠标进入再出去才能进行轮播；
2.鼠标点击时间未出发，无法进行点击。
HTML
<!DOCTYPE html>
<html>
<head>
<title>JS轮播图大作业</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jsProject.css">
<script src="js/jsProject.js"></script>
</head>
<body>
<div class="main" id="main">
<!-- 导航 -->
<div class="nav" id="tittle">
<div class="nav-con click">首页</div>
<div class="nav-con">点击看看</div>
<div class="nav-con">会自动的</div>
<div class="nav-con">我的网站</div>
</div>
<!-- 轮播图 -->
<div class ="pic" id="pic">
<img src="img/1.jpg" class="img-con a">
<img src="img/3.jpg" class="img-con">
<img src="img/4.jpg" class="img-con">
<img src="img/5.jpg" class="img-con">
</div>
</div>
</body>
</html>
CSS
*{margin: 0;padding: 0}
a{text-decoration: none;}
.main{width:800px;height: 510px;margin:auto;overflow: hidden;}
.nav{width: 800px;height: 60px;margin:auto;font-family: 'Microsoft YaHei';}
.nav-con{box-sizing: border-box; width: 25%;height: 60px;display: inline-block;float: left;text-align: center;line-height: 60px;cursor:pointer;color: #666;font-size: 22px;}
.pic{position: relative; width:800px;height:450px;margin:auto;background-repeat:no-repeat;cursor:pointer;}
img{width:800px;height:450px;}
.img-con{position:absolute; top: 0;left: 0;display: none;}
.click{background:#FFCC00;font-weight: bold;border-radius: 10px;}
.a{display: block;}
JS
window.onload=function(){
var timer = null,
index = 0,
img=byId("pic").getElementsByTagName("img"),
nav=byId("tittle").getElementsByTagName("div"),
main = byId("main"),
size=img.length,
num=nav.length;
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
// 添加绑定事件
function addHandler(element, type, handler) {
// 除IE浏览器其他浏览器
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
// IE8及以上
else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
}
else {
element['on' + type] = handler;
}
}
// 定时器
function startAutoPlay(){
timer=setInterval(function(){
index++;
if (index>=size) {
index=0;
}
changeImg(index);
console.log(index)
},1000);
}
// 停止轮播
function stopAutoPlay(){
if (timer) { clearInterval(timer);}
}
function changeImg(){
for(var i=0,len=num;i<len;i++){
nav[i].className="nav-con";
img[i].className="img-con";
}
nav[index].className="nav-con click";
img[index].className="img-con a";
}
// 切换页面
function slideImg(){
startAutoPlay();
addHandler(main,"mouseover",stopAutoPlay);
addHandler(main,"mouseout",startAutoPlay);
for (var i=0;i<=size;i++){
nav[i].id = i;
console.log(i);
addHandler(nav[i],"click",function(){
index = this.id;
changeImg(index);
})}
}
addHandler(window,"load",startAutoPlay);
addHandler(main,"mouseover",stopAutoPlay);
addHandler(main,"mouseout",startAutoPlay);
}
正在回答
同学你好，问题解答如下：
1. 页面打开没有自动轮播，是因为页面打开后，“ addHandler(window,"load",startAutoPlay);”这句代码并不会执行，所以整个代码中，没有调用startAutoPlay方法，因此轮播图无法自动开启。而“ addHandler(window,"load",startAutoPlay);”这句代码之所以不会执行，是因为它位于window.onload这个事件中，如下：
当“addHandler(window,"load",startAutoPlay); ”这句代码执行时，window.onload事件已经触发完了，所以不会再捕获到onload事件了，也就不会执行startAutoPlay了。
2. 点击选项卡，之所以不切换轮播图，是因为选项卡的点击事件写在了slideImg方法中，而该方法没有调用，所以里面的代码不会执行，因此需要调用一下。
综上，调整如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星