6-2作业
来源：6-2 作业题
慕九州9265930
2018-04-18 00:25:16
<HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
color:#14191e;
font-family: 微软雅黑;
}
.main{
width:100%;
height:460px;
overflow: hidden;
}
.banner{
width:100%;
height:400px;
overflow: hidden;
}
.banner-slide{
width:100%;
height:460px;
}
.dots{
width:100%;
height:60px;
line-height:60px;
text-align: center;
}
.dots1{
width:300px;
height:60px;
line-height:60px;
color:#666;
font-size:22px;
float:left;
cursor:pointer;
}
.slide-active{
display: block;
}
.slide1{
background-image: url("img/1.jpg");
}
.slide2{
background-image: url("img/3.jpg");
}
.slide3{
background-image: url("img/4.jpg");
}
.slide{
background-image: url("img/5.jpg");
}
span:hover{
background-color: #ffcc00;
}
</style>
</head>
<body>
<div class="main" id="main">
<!--导航-->
<div class="dots" id="dots">
<span class="dots1 dots1-one">首页</span>
<span class="dots1">点击查看</span>
<span class="dots1">会自动的</span>
<span class="dots1">我的网页</span>
</div>
<!--图片轮播-->
<div class="banner" id="banner">
<a href="#">
<div class="banner-slide slide1 slide-active"></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>
<script>
//封装getElmentById()
function byId(id){
return typeof(id)==="string"? document.getElementById(id):id;
}
//console.log(main);
//定义一个函数
var index=0,
timer=null,
pics=byId(banner).getElementsByTagName("div");
//len=pics.length;
function slideImg(){
var main=byId(main);
//划过时清除定时器
main.onmouseover=function(){
if (timer) clearInterval(timer);
}
//离开时继续
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index >= pics.length){
index=0;
}
changeImg();
}
,1000)
}
//自动在main上触发鼠标离开事件
main.onmouseout();
//图片的自动轮播：
function changeImg(){
//遍历banner下的所有DIV，将其隐藏
for(var i=0;i<pics.length;i++){
pics[i].style.display="none";
}
pics[index].style.display='block';
}
}
</script>
</body>
</html>
为什么我这样编写代码，图片一直都是显示第一张不会动？
1回答
-
小于飞飞
2018-04-18
1. 将 var main = byId(main) 修改为 var mymain = byId(main) ; main.onmouseover 等，修改为mymain.onmouseover 。
2. 在最后执行slideImg(); ，否则函数不会自动运行。
动手实践，加油！
0
相似问题