6-2作业的疑问
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript实现轮播特效项目作业</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--主体代码-->
<div class="main" id="main">
<!--导航切换-->
<div class="nav-box clearfix" id="nav-box">
<div class="nav-inner-box">
<a class="nav-item" href="">首页</a>
</div>
<div class="nav-inner-box">
<a class="nav-item" href="">点击查看</a>
</div>
<div class="nav-inner-box">
<a class="nav-item" href="">会自动的</a>
</div>
<div class="nav-inner-box">
<a class="nav-item" href="">我的网站</a>
</div>
</div>
<!--banner切换-->
<div class="banner-box" id="banner-box">
<div class="banner-inner-box">
<a href=""><img src="img/1.jpg"></a>
</div>
<div class="banner-inner-box">
<a href=""><img src="img/2.jpg"></a>
</div>
<div class="banner-inner-box">
<a href=""><img src="img/3.jpg"></a>
</div>
<div class="banner-inner-box">
<a href=""><img src="img/4.jpg"></a>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
CSS代码如下：
*{
margin: 0;
padding: 0;
font-family: "Microsoft YaHei";
font-size: 22px;
text-align: center;
margin: 0 auto;
}
/*.clearfix:after{
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}*/
a{
text-decoration: none;
background: red;
}
a:link,a:visited{
color:#666;
}
.mian{
width: 100%;
position: relative;
}
.nav-box{
width: 1200px;
height: 80px;
background: #fff;
font-size: 0;
}
.nav-inner-box{
width: 300px;
height: 80px;
line-height: 80px;
color: #666;
display: inline-block;
/*float: left;*/
}
.nav-active{
font-weight: bold;
background-color: #ffcc00;
/*border-radius: 10px;*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.banner-box{
width: 1200px;
height: 460px;
overflow: hidden;
}
.banner-inner-box a img{
display: block;
}
.banner-active{
position: absolute;
top: 80px;
/*z-index: 10;*/
}
JS代码如下：
// var timer=null,
// index=0,
// banner=byId("banner-box"),
// banners=byId("banner-box").getElementByClassName("banner-inner-box"),
// len=banners.length;
var timer=null,
index=0,
bannerbox=document.getElementById("banner-box"),
banners=bannerbox.getElementsByTagName("div"),
navbox=byId("nav-box"),
navs=navbox.getElementsByTagName("div"),
navitems=document.getElementsByClassName("nav-item"),
len=banners.length;
//封装获取通过id获取对象的方法
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
//清除时间间隔，停止banner播放
function autoStop(){
if(timer){
clearInterval(timer);
}
}
//设置banner按照顺序自动轮播
function autoPlay(){
timer=setInterval(function() {
index++;
if(index>=len){
index=0;
}
changeImg();
}, 1000);
}
//图片轮播改变样式效果
function changeImg(){
for(var i=0;i<len;i++){
// banners[i].style.display="none";
banners[i].className="banner-inner-box";
navs[i].className="nav-inner-box";
}
// banners[index].className="block";
banners[index].className="banner-inner-box banner-active";
navs[index].className="nav-inner-box nav-active";
}
//鼠标聚焦时停止轮播，以及鼠标失焦时自动轮播
bannerbox.onmouseout=function() {
autoPlay();
}
bannerbox.onmouseover=function() {
autoStop();
}
navbox.onmouseout=function() {
autoPlay();
}
navbox.onmouseover=function() {
autoStop();
}
//导航栏的点击切换
for(var j=0;j<len;j++){
// navs[j].setAttribute("data-id",j);
// navs[j].onclick=function(){
// index=this.getAttribute("data-id");
// changeImg();
navitems[j].setAttribute("data-id",j);
console.log(navitems[j]);
navitems[j].onclick=function(){
index=this.getAttribute("data-id");
// console.log(index);
changeImg();
}
}
问题：
1.在JS代码中，为什么我对导航文字的a标签进行onclick事件，没有切换效果，打印index时能看到对应的0、1、2、3的自定义data-id，但是都是一闪而过。如果我把onclick改成onmouseover事件，切换效果正常。在调试时，因为之前对导航文字a标签的容器进行了onmouseover事件，怕因为这个因素影响，还注释了这段代码，但是依然没有作用。
2.本来在最初的设想里，是对导航文字a标签的容器进行点击事件，但是发现切换效果却只能在容器内点击实现切换（测试正常），但是对导航文字a标签进行点击却没有效果，不知道为什么？我认为导航文字a标签是在容器内的，如果对容器绑定点击事件，容器里的内容也应该在点击事件范围内，不知道我的理解是否错误？10
收起
正在回答
2回答
原因是你给他们绑定了单击时间，这几个按钮都是a超链接，所以当你的标签中的href为空的话，页面会刷新，所以会出现闪的那种情况，你可以给href个值，写成<a class="nav-item" href="#">首页</a>就可以避免这种情况。
但是你的效果还有一个问题，就是绑定的时候，不是给a标签绑定的，是给外面的nav-inner-box绑定的，不然只能点字儿的时候才可以。
还有个问题默认的要让第一章图片显示，并且第一个按钮是选中状态。
另外还有一些细小的样式问题，比如超链接的背景去掉，下划线去掉等。可以再优化一下。
欢迎采纳。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星