请问哪里的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<link rel="stylesheet" href="..\css\css1.css">
<script src="..\js\js1.js"></script>
</head>
<body>
<div class="main" id="main">
<!-- 标题 -->
<div class="tit">
<ul>
<li>首页</li>
<li>点击看看</li>
<li>会自动的</li>
<li>我的网站</li>
</ul>
</div>
<!-- 切换项内容 -->
<div class="content" id="content">
<div class="p1 active"><img src="..\img\1.jpg" alt=""></div>
<div class="p2"><img src="..\img\2.jpg" alt=""></div>
<div class="p3"><img src="..\img\3.jpg" alt=""></div>
<div class="p4"><img src="..\img\4.jpg" alt=""></div>
</div>
</div>
<div class="none"></div>
</body>
</html>
------------------------------------------------------------------------
*{
margin: 0;padding: 0;
}
.main{
margin-top:7px;
width: 100%;
border: 1px dashed #ccc;
}
.tit ul li{
font-size: 22px;
color:#666;
float: left;
list-style:none;
text-align: center;
width: 25%;
height: 60px;
line-height: 60px;
cursor: pointer;
}
.content{
width: 100%;
position: absolute;
top: 68px;
}
.p1,.p2,.p3,.p4{
text-align: center;
display: none;
}
.active{
display: block;
}
.none{
margin-top: 100px;
}
=--------------------------------------------
var main=document.getElementById("main"),
index=0,
timer=null,
pics=document.getElementById("content").getElementsByTagName("div"),
lis=document.getElementsByTagName("li")
;
function slideImg(){
//鼠标滑过清除定时器
main.onmouseover=function(){
if(timer) clearInterval(timer);
}
//鼠标移开,定时器操作
main.onmouseout=function (){
timer=setInterval(function(){
index++;
if(index>=pics.length){ index=0;}
changeImg();
}, 1000);
}
main.onmouseout();
//点导航切换图片
for(var j=0;j<pics.length;j++){
lis[j].id="l"+d;
lis[j].onclick=function(){
index=this.id;
changeImg();
}
}
}
function changeImg(){
for(var i=0;i<pics.length;i++){
pics[i].style.dispaly="none";
lis[i].style.background="";
}
pics[index].style.display="block";
lis[i].style.background="#ffcc00";
}
slideImg();
正在回答
运行了你的代码,控制台报错,
1. 获取不到pics,因为html页面还没有加载完成,所以Js文件获取不到,建议使用onload事件,如图所示:
2. d没有定义
3. 没有放在for循环中,lis[i]获取不到
如果还有其他的问题,可以继续提问,助教老师会及时为你答疑解惑。
祝学习愉快!
相似问题
登录后可查看更多问答,登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星