请老师帮忙看看代码。
为什么我点击标题能够找到正确的index。传参后却不能显示我要的图片呢？还有背景图点击之后也是很快就消失了，是什么原因呢?
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="homework.css">
</head>
<body>
<div class="box">
<div class="title" id="title">
<ul>
<li><a href="">首页</a></li>
<li><a href="">点击看看</a></li>
<li><a href="">会自动的</a></li>
<li><a href="">我的网站</a></li>
</ul>
</div>
<div class="banner" id="banner">
<div class="banner-slide active"><img src="images/1.jpg"/></div>
<div class="banner-slide"><img src="images/3.jpg"/></div>
<div class="banner-slide"><img src="images/4.jpg"/></div>
<div class="banner-slide"><img src="images/5.jpg"/></div>
</div>
</div>
<script src="homework.js"></script>
</body>
</html>
CSS:
*{
margin:0px;
padding:0px;
}
a{
text-decoration:none;
color:#666;
}
.box{
width:1200px;
margin:0 auto;
margin-top:20px;
}
.box .title li{
list-style-type:none;
float:left;
width:300px;
height:50px;
text-align:center;
line-height:50px;
font-size:22px;
font-weight:bold;
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
}
.banner .banner-slide{
display:none;
}
.banner .active{
display:block;
}
JS:
function getId(id){
return typeof(id)==="string"?document.getElementById(id):id
}
function slideImg(){
var pics=getId('banner').getElementsByTagName('div'),
index=0;
lis=getId('title').getElementsByTagName('li'),
banner=getId('banner');
// 定时，找到每个div的索引后调用changeImg函数
var timer=setInterval(function(){
index++;
if(index>=pics.length){
index=0;
}
changeImg()
},1000)
// 当鼠标滑过banner，取消定时
banner.onmouseover=function(){
clearInterval(timer);
}
// 鼠标离开banner，又开始轮播效果
banner.onmouseout=function(){
slideImg()
}
// 遍历每一个标题，绑定事件
for(var m=0;m<lis.length;m++){
lis[m].id=m;
lis[m].onclick=function(){
for(var z=0;z<lis.length;z++){
lis[z].style.background="#fff"
}
index=this.id;
changeImg()
this.style.backgroundColor="#ffcc00";
this.style.borderRadius="5px";
}
}
// 切换图片
function changeImg(){
for(var i=0;i<pics.length;i++){
pics[i].style.display="none";
}
pics[index].style.display="block";
}
}
slideImg()
正在回答 回答被采纳积分+1
你好同学,
首先第一个问题: 第一处修改时，把lis遍历放在函数lis[m].onclick里面会有什么问题:
这里是一个点击事件,再点击事件中实现的是:先将所有切换栏的背景颜色设置为#fff,this指向的是鼠标点击那一个tab切换栏,会给点击的切换栏改变颜色,添加样式,
这一步的操作是切换图片的逻辑,在切换图片的时候,显示第一张图片,对应的第一个切换栏改变颜色,显示第二张图片的时候,对应的第二个切换栏改变颜色...以此类推
第二个问题: 加了第三处的修改后，为什么没有点击标题，橙色背景可以自动切换？
就是上一步的操作哦~将每一个切换栏和图片遍历,先将所有切换栏设置背景颜色为#fff,图片隐藏,当第几个图片显示,对应的tab切换栏就会改变颜色哦~
第三个问题: 三处修改后，当鼠标点击每一个标题时，对应的图片并不能显示，而是闪一下橙色就消失了，请问要想点击，出现对应的图片，我还需要做什么修改呢？
是因为a标签没有阻止跳转,页面刷新了,可以通过在a标签链接处设置javascript:;这样点击就没有反应啦~
如图:
第四个问题: 第二个如果加在banner上，是不是也可以，只是达到的是另外一种效果？
是的,这个部分的代码是为了实现当鼠标移入切换栏或者图片都会清除定时器,如果设置在banner上,就会实现当鼠标移入图片时,轮播停止,而移入其他部分就不会停止轮播
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星