老师，不能实现自由轮播，求指导！
来源：3-8 项目作业
慕仔4144401
2019-12-17 16:01:13
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</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;
}
.menu .items a:hover{
color:#000;
}
/*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/4.jpg);
}
js代码：
var index=0, //index为当前索引
banner=byId("banner"),
pics=banner.getElementsByTagName("div"),
len=pics.length,
Items=byId("items").getElementsByTagName("li"), //获取导航项的菜单
timer=null, //定时器
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";
li[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";
}
//图片自动轮播
function startAutoPlay(){
timer=setInterval(function(){
index++;
if(index>=len) {
index=0;
}
changeImg();
},1000)
}
//清除定时器，停止自动轮播
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
}
3回答
-
慕仔4144401
提问者
2019-12-18
已找到问题，问题已解决！
0 -
慕仔4144401
提问者
2019-12-18
老师，我修改之后还是没有反应
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);
0 -
好帮手慕言
2019-12-17
同学你好，使用同学提供的代码测试，控制台是有报错的，报错信息如下：
从提示信息是哪个可以看出获取的元素是undefined，建议：在循环里面绑定事件。代码参考：
修改后鼠标移入导航项控制台还有报错，如下：
提示li没有定义，在同学的代码中没又li变量，建议：将li修改为Items
不能自动轮播是没有调用startAutoPlay函数。代码参考：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题