页面没有效果，请老师帮忙看看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播</title> <link rel="stylesheet" href="css/base.css"> <script src="javascript/js.js"></script> </head> <body> <div class="main" id="main"> <!--选项卡--> <div id="dh"> <nav> <a class="active" href=""><span>首页</span></a> <a href=""><span>点击看看</span></a> <a href=""><span>会自动的</span></a> <a href=""><span>我的网站</span></a> </nav> </div> <!--轮播图--> <div class="banner" id="banner"> <a href=""> <div class="banner-slider slider1 slider-active"></div> </a> <a href=""> <div class="banner-slider slider2"></div> </a> <a href=""> <div class="banner-slider slider3"></div> </a> <a href=""> <div class="banner-slider slider4"></div> </a> </div> </div> </body> </html>
*{
padding: 0;
margin: 0;
}
body{
font-family: "Microsoft YaHei";
}
a{
text-decoration: none;
font-size: 22px;
}
a:link,a:visited{
color: #5e5e5e;
}
.main{
width: 1200px;
margin: 0 auto;
}
nav{
height: 50px;
background:#fff;
}
nav a{
text-align: center;
line-height: 50px;
padding: 0 105px;
display: inline-block;
}
nav a:hover{
background-color:#FFCC00;
border-radius: 10% 10% 0 0;
}
nav .active{
background:#FFCC00;
border-radius: 10% 10% 0 0;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
}
.banner-slider{
width: 1200px;
height: 460px;
float: left;
display: none;
}
.banner .slider-active{
display: block;
}
.banner .slider1{
background: url("../img/1.jpg") ;
}
.banner .slider2{
background: url("../img/3.jpg");
}
.banner .slider3{
background: url("../img/4.jpg");
}
.banner .slider4{
background: url("../img/5.jpg");
}
//声明全局变量
window.onload=function(){
var index=0;//当前图片显示的索引，默认值为0；
var time=null;//定时器
var main=byId("main");
var pics=byId("banner").getElementsByTagName("div"),
size=pics.length,
dh=byId("dh").getElementsByTagName("span");
//封装getElemntById
function byId(id){
return typeof(id)==="string"?document.getElemntById(id):id;
}
//封装兼容浏览器事件处理程序
function addHandler(element,type,handler){
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}
else if (element.attachEvent) {
element.attachEvent("on"+type,handler);
}
else{
element['on'+type]=handler;
}
}
//封装切换图片函数
function changeImg(){
for(var i=0;i<size;i++){
pics[i].style.diaplay="none";
dh[i].className="";
}
pics[index].style.diaplay="block";
dh[index].className="active";
}
//封装图片轮播
function starAutoPlay(){
timer=setInterval(function(){
index++;
if(index>=size){ index=0;}
changeImg();
},1000)
}
//清除定时器，停止自动轮播
function stopAutoPlay(){
if (timer) {
clearInterval(time);
}
}
//点击选项卡，出现相应的图片
if (var d=0;d<size;d++) {
dh[d].setAttribute("date-id",d);
addHandler(dh[d],"click",function(){
index=this.getAttribute("data-id");
changeImg();
})
}
//鼠标划入main，停止轮播
addHandler(main,"mouseover",stopAutoPlay);
//鼠标离开main，开始轮播
addHandler(main,"mouseout",starAutoPlay);
//自动开启轮播
starAutoPlay();
}
正在回答
你好，修改了‘悬崖上的金魚姬’老师说的问题以及自己发现的time之外，代码中还是存在问题的：
（1）display属性名称不对：
（2）选项卡开始默认添加样式是在a标签上的，这样整个选项卡才会有背景颜色，而js中获取的是span元素，背景颜色只有一部分，可以修改获取的元素为a：
（3）点击选项卡时，都会刷新显示第一张，这是因为a标签有默认跳转功能，如果href属性值不写的话，就会刷新页面，可以阻止跳转：
还有获取的date-id属性和设置的不一致：
自己重新修改测试下，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星