为什么我这代码在浏览器上没有反应，鼠标滑动不好用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>index.html</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="main" id="main"> <!-- 导航菜单--> <div class="title" id="title"> <span class="active">首页</span> <span>点击查看</span> <span>会自动的</span> <span>我的网站</span> </div> <!-- 导航背景图片--> <div class="banner" id="banner"> <a href="#"> <div class="banner-pic pic1 pic-active"></div> </a> <a href="#"> <div class="banner-pic pic2"></div> </a> <a href="#"> <div class="banner-pic pic3"></div> </a> <a href="#"> <div class="banner-pic pic4"></div> </a> <a href="#"> <div class="banner-pic pic5"></div> </a> </div> <script type="text/javascript" src="js/JavaScript.js"> </script> </body> </html>
*{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑";
color:#666;
}
.mian{
width: 1200px;
height: 500px;
margin:30px auto;
overflow: hidden;
position: relative;
}
/*导航菜单*/
.title{
width: 1200px;
height: 40px;
background: pink;
/* position: absolute;*/
}
.title span{
display: inline-block;
width: 300px;
height: 40px;
background: #FFF;
text-align: center;
line-height: 40px;
}
.title span.active{
background: #FFCC00;
}
/*背景图片*/
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}
.banner-pic{
width: 1200px;
height: 460px;
background-repeat: no-repeat;
float: left;
display: none;
position: absolute;
}
.pic-active{
display: block;
}
.pic1{
background-image: url("../img/1.jpg");
}
.pic2{
background-image: url("../img/2.jpg");
}
.pic3{
background-image: url("../img/3.jpg");
}
.pic4{
background-image: url("../img/4.jpg");
}
.pic5{
background-image: url("../img/5.jpg");
}var index=0,
timer=null;
pics=byId("banner").getElementByTagName("div");
len=pics.length;
title=byId("title").getElementByTagName("span");
//封装getElementById()方法
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
function pic(){
var main=byId("main");
//滑过清除定时器，离开继续
main.onmouseover=function(){
//滑过清除定时器
if(timer){
clearInterval();
}
}
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index >=len){
index=0;
}
//切换图片
changePic();
},1000);
}
mian.onmouseout();
//点击title切换图片
//遍历
for(var d=0;d<len;d++){
//给所有span添加一个ID属性，
title[d].id=d;
title[d].onclick=function(){
//改变index为当前span的索引
index=this.id;
changePic();
}
}
}
//切换图片
function changePic(){
//遍历
for(var i=0;i<len;i++){
pics[i].style.display="none";
//清除span中的class
title[i].className="";
}
pics[index].style.display='block';
title[index].className="active";
}
pic();13
收起
正在回答 回答被采纳积分+1
2回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星