老师图片切换怎么没反应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<!-- 导航栏 -->
<div class="menu-box">
<ul class="menu-nav" id="menu-nav">
<!-- 禁止a标签的跳转属性 -->
<li class="menu-inner active"><a href="javascript:;">首页</a></li>
<li class="menu-inner"><a href="javascript:;">点击看看</a></li>
<li class="menu-inner" ><a href="javascript:;">会自动的</a></li>
<li class="menu-inner" ><a href="javascript:;">我的网站</a></li>
</ul>
</div>
<!-- banner -->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1">
</div>
</a>
<a href="">
<div class="banner-slide slide2">
</div>
</a>
<a href="">
<div class="banner-slide slide3">
</div>
</a>
<a href="">
<div class="banner-slide slide4">
</div>
</a>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
font-family: Microsoft YaHei;
color:#ffcc00;
}
.main{
width: 1200px;
height: 520px;
margin: 30px auto;
}
/* 导航栏设置 */
/*导航盒子*/
.menu-box{
width:1198px;/*因为边框已经1px了，左右各1px,所以1200要减2*/
height:40px;
border:1px dotted #ececec; /*dotted是点状边框*/
border-bottom: none;
background-color: #fff;
}
/*导航文字*/
.menu-inner{
width:295.8px;/*li存在间隙所以宽度要小于299.5px*/
height:40px;
/* 要排成一列用inline-block 可以设置宽高 也改变了显示状态li前面的圆点会消失*/
display: inline-block;
/*文本对齐方式*/
text-align: center;
font-size: 22px;
line-height: 40px;/*这里设置了高度，所以用间距来居中不要用margin-top*/
}
a{
/* 取消下划线 */
text-decoration: none;
color: #666;
}
/*未访问和以访问*/
a:link,a:visited{
color: #666;
}
.menu-box .menu-nav .menu-inner:hover{
background-color: #ffcc00;
/*圆角边框*/
border-radius: 5px;
/*鼠标变手*/
cursor: pointer;
font-weight: bold;
}
/*banner设置*/
.banner{
width: 1200px;
height: 460px;
/*4张banner溢出了，剪出溢出部分，也可以当清除浮动用*/
overflow: hidden;
/* background-color: red; */
}
.banner-slide{
width: 1200px;
height: 460px;
/*不重复*/
background-repeat: no-repeat;
}
.slide1{
background-image: url(../img/1.jpg);
}
.slide2{
background-image: url(../img/3.jpg);
}
.slide3{
background-image: url(../img/4.jpg);
}
.slide4{
background-image: url(../img/5.jpg);
}
//声明全局变量
var index=0,//当前显示图片的索引，默认值为0，
timer=null,//定时器
banner=byId("banner"),
bannerContent=byId("banner-content"),
pics=banner.getElementsByTagName("div"),
plen= pics.length,
menuBox=byId("menu-box"),
menuNav=byId("menu-nav"),
li=menuNav.getElementsByTagName("li"),//获取菜单的每一项
size = li.length;
//封装getElementById()
function byId(id){
return typeof(id)==="string" ? document.getElementById(id):id;
}
//兼容通用事件绑定方法
function addHandler(element,type,handler){
//非IE浏览器
if(element.addEventListener){
element.addEventListener(type,handler,true);
//IE浏览器支持DOM2级
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
//IE浏览器不支持DOM2级
}else{
element["on"+type]=handler;
}
}
//切换图片
function changeImg(){
//遍历所有图片，将图片隐藏
for(var i=0;i<plen;i++){
pics[i].style.display="none";
li[i].className = "menu-inner";
}
//显示当前图片
pics[index].style.display="block";
li[index].className = "menu-inner active"
}
//动画自动播放
function startOutPlay(){
timer = setInterval(function(){
index++;
if (index >=plen){
index = 0
}
changeImg();
}, 1000);
}
//动画清除方法
function stopOutPlay(){
if(timer){
clearInterval(timer);
}
}
//给导航绑定事件点击标题切换图片
for(var d=0;d<plen.length;d++){
menuNav[d].setAttribute("data-id",d);
addHandler([d],"click",function () {
index=this.getAttribute("data-id");
changeImg()
});
}
//调用自动播放函数
startOutPlay()
//鼠标停留在整个页面时图片不动
addHandler(main,'mouseover',stopOutPlay);
//鼠标离开时页面进行滚动
addHandler(main,'mouseout',startOutPlay);
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧