老师帮吗看看为什么不能自动播放
来源：3-8 项目作业
恺撒911
2019-05-29 01:36:26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业练习</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div class="title">
<ul class="dots" id="dots">
<li class="active">首页</li>
<li>点击看看</li>
<li>会自动的</li>
<li>我的网站</li>
</ul>
</div>
<div class="banner" id="banner">
<div class="banner-slide slide1"></div>
<div class="banner-slide slide2"></div>
<div class="banner-slide slide3"></div>
<div class="banner-slide slide4"></div>
</div>
<script src="js/script1.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
}
.title{
width:1200px;
height:50px;
margin:0 auto;
}
ul{
list-style:none;
width:1200px;
height:50px;
line-height:50px;
}
li{
float:left;
font-size:22px;
width:150px;
height:50px;
text-align: center;
margin-left:118px;
cursor:pointer;
}
li:hover{
background-color:#ffcc00;
}
.banner{
width:1200px;
height:460px;
margin:0 auto;
overflow:hidden;
}
.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
}
.slide1{
background-image:url(../img/1.jpg);
}
.slide2{
background-image:url(../img/5.jpg);
}
.slide3{
background-image:url(../img/3.jpg);
}
.slide4{
background-image:url(../img/4.jpg);
}
var timer=null,
index=0,
pics=byId("banner").getElementsByTagName("div"),
size=pics.length,
dots=byId("dots").getElementsByTagName("li");
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 byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
function startAutoPlay(){
timer=setInterval(function(){
index++;
if(index>=size){
index=0;
}
changeImg();
},1000)
}
function changImg(){
for(var i=0,len=dots.length;i<len;i++){
dots[i].className="";
pics[i].style.display="none";
}
dots[index].className="active";
pics[index].style.display="block";
}
for(var i=0,len=dots.length;i<len;i++){
dots[i].id=i;
addHandler(dots[i],"click",function(){
index=this.id;
changImg();
})
}
2回答
-
好帮手慕星星
2019-05-29
你好，是因为自动播放方法没有调用，并且切换图片的方法名字写错了，参考修改：
代码中给选项卡添加了点击事件，但是点击选项卡的时候轮播还在继续，这样是不对的，需要移入图片和选项卡的时候停止轮播，然后点击选项卡，移出的时候继续轮播。
功能还需要完善，自己再写一写。
祝学习愉快！
0
相似问题
回答 4
回答 2