老师，求指导！
问题1：鼠标离开自动播放和鼠标经过暂停自动播放，没有暂停或接着播放
问题2：鼠标滑过相应的标题时，对应的图片没有显示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main">
<!--主菜单-->
<div class="menu">
<ul class="items" id="items">
<li class="li-active"><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">
<a href="#">
<div class="banner-slide slide1 slide-active"></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/index.js"></script>
</body>
</html>
css代码：
*{
margin:0;
padding:0;
font-family:"微软雅黑";
}
a{
text-decoration:none;
cursor: pointer;
}
li{
list-style:none;
}
a:link,a:visited{
color:#666;
}
/*网页部分*/
.main{
width:1200px;
margin:0 auto;
}
/*标题栏*/
.menu{
width:100%;
height:60px;
background:#fff;
}
.menu .items li{
width:300px;
float:left;
height:60px;
}
.li-active{
background:#ffcc00;
border-radius:6px;
}
.menu .items a{
font-size:22px;
line-height:60px;
color:#666;
display:block;
text-align:center;
}
/*banner*/
.banner{
width:1200px;
height:460px;
margin:0 auto;
overflow: hidden;
}
.banner-slide{
width:100%;
height:100%;
background-repeat:no-repeat;
float:left;
display:none;
}
/*第一张图片显示*/
.slide-active{
display:block;
}
/*插入banner图片*/
.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);
}
js代码：
var index=0, //index为当前索引
banner=byId("banner"),
pics=banner.getElementsByTagName("div"),
len=pics.length,
Items=byId("items").getElementsByTagName("li"), //获取导航项的菜单
timer=null, //定时器
main=byId("main"),
size=Items.length;
//封装getElementById()
function byId(id){
return typeof(id)==="string"? document.getElementById(id):id;
}
/*封装通用事件绑定方法
element绑定事件的DOM元素
事件名
事件处理程序
*/
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;
}
}
//给所有菜单定义属性，标明它的索引
for(var m=0;m<size;m++){
Items[m].setAttribute("data-index",m);
//绑定title每个选项的mouseover事件
addHandler(Items[m],"mouseover",function(){
//遍历所有选项卡类名为空，图片隐藏
for(var i=0;i<size;i++){
pics[i].style.display="none";
Items[i].className="";
}
//显示当前图片
index=this.getAttribute("data-index");
pics[index].style.display="block";
Items[index].className="li-active";
})
}
//切换图片
function changeImg(){
for(var j=0;j<len;j++){
pics[j].style.display="none";
Items[j].className="";
}
pics[index].style.display="block";
Items[index].className="li-active";
}
//自动开启轮播
startAutoPlay();
//图片自动轮播
function startAutoPlay(){
timer=setInterval(function(){
index++;
if(index>=len) {
index=0;
}
changeImg();
},1000)
}
//清除定时器，停止自动轮播
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
}
//鼠标划入main,停止轮播
addHandler(main,"mouseover",stopAutoPlay);
//鼠标离开main,自动轮播
addHandler(main,"mouseout",startAutoPlay);
正在回答
同学你好，因为外层元素div，main没有设置id属性，js中使用id名获取不到main元素, 所以给main绑定事件会报错，导致效果没有实现，出现了同学问题一和问题二中的现象。
建议修改：在html上添加id属性
作业要求点击选项卡时进行切换，建议修改为click事件，例：
同学完成作业后， 可以提交作业，批作业的老师会针对你的代码，给出详细的修改建议，并整理成文档发送给同学，方便同学查看修改。
如果帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星