老师，麻烦您帮我看一下，在js事件绑定过程中出现了什么问题，图片不进行轮播
<!DOCTYPE html>
<html>
<head>
<title>JS项目作业</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="container">
<!-- 导航栏设置 -->
<div class="nav" id="nav">
<div class="btn active" id="btn"><a href="">首页</a></div>
<div class="btn" id="btn"><a href="">点击看看</a></div>
<div class="btn" id="btn"><a href="">会自动的</a></div>
<div class="btn" id="btn"><a href="">我的网站</a></div>
</div>
<!-- 轮播图设置 -->
<div class="banner" id="banner">
<a href="">
<div class="slide banner-1 active"></div>
</a>
<a href="">
<div class="slide banner-2"></div>
</a>
<a href="">
<div class="slide banner-3"></div>
</a>
<a href="">
<div class="slide banner-4"></div>
</a>
</div>
<!-- <div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
<a href="">
<div class="banner-slide slide4"></div>
</a>
</div> -->
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
.container{
width: 1200px;
height: 520px;
margin: 30px auto;
}
/*导航栏设置*/
.nav{
width: 1198px;
height: 59px;
border:1px dotted #ececec;
border-bottom:none;
overflow: hidden;
}
.nav .btn{
width:299.5px;
height: 59px;
float: left;
text-align: center;
}
.nav .btn:hover{
background-color: #ffcc00;
border-radius: 3px;
}
.nav .btn a{
text-decoration: none;
line-height: 59px;
font-size: 22px;
color: #000;
text-align: center;
}
.nav .active{
display: block;
}
/*轮播图设置*/
.banner{
width:1200px;
height:460px;
overflow: hidden;
}
.banner .slide{
width: 1200px;
height: 460px;
background-repeat: no-repeat;
float: left;
display: none;
}
.banner .active{
display: block;
}
.banner .banner-1{
background-image: url(../img/1.jpg);
}
.banner .banner-2{
background-image: url(../img/3.jpg);
}
.banner .banner-3{
background-image: url(../img/4.jpg);
}
.banner .banner-4{
background-image: url(../img/5.jpg);
}
//声明全局变量
var timer = null,//存放定时器
index = 0,//当前显示图片的索引，默认值为0
pics = byId("banner").getElementByTagName("div"),//获取图片的个数
size = pics.length,//获取图片的个数
btn = byId("btn"),
banner = byId("banner");
//封装getElementByID()
function byId(id){
return typeof(id) === "string" ? document.getElementById(id):id;
}
//封装一个绑定事件类型的函数
function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, true);
}
else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
}
else {
element['on' + type] = handler;
}
}
//封装遍历图片的函数
function changeImg(){
for(var i= 0;i < size;i++){
btn[i].style.display = "none";
pics[i].className = "";
}
btn[index].style.display = "block";
pics[index].className = "active";
}
//图片的自动播放
function startAutoPlay(){
timer = setInterval(function(){
index++;
if(index >= size) index = 0;
changeImg();
},1000);
}
//清除定时器，停止自动轮播
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
}
//点击导航栏内容便出现相对应的图片
for(var d = 0;d < size;d++){
btn[d].setAttribute("data-id",d);
addHandler(btn[d],"click",function(){
index = this.getAttribute("data-id");
changeImg();
});
}
//自动开启轮播
startAutoPlay();
//鼠标滑入benner,停止轮播
addHandler(banner,"mouseover",stopAutoPlay);
//鼠标离开benner,再次开始轮播
addHandler(banner,"mouseout",startAutoPlay);
正在回答
同学你好，可以给轮播图整体添加鼠标移入停止轮播的事件，而不是只给图片部分添加。另外，可以给a标签设置个属性，避免点击时，刷新页面：
同学的思路是没问题的。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星