麻烦老师看下报错了
来源：3-4 图片自动轮播
慕用0526790
2019-12-23 16:06:32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合实例</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="main" id="main">
<!--图片轮播-->
<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>
</div>
<!--上一张、下一张-->
<a href="javascript:void(0)" class="button prev"></a>
<a href="javascript:void(0)" class="button next"></a>
<!--圆点导航-->
<div class="dots">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
*{
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
body{
font-family:"微软雅黑";
color:#14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
overflow:hidden;
position:relative;
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
position:absolute;
display:none;/*隐藏*/
}
.slide-active{
display:block;/*显示*/
}
.slide1{
background-image:url(../img/bg1.jpg);
}
.slide2{
background-image:url(../img/bg2.jpg);
}
.slide3{
background-image:url(../img/bg3.jpg);
}
.button{
position:absolute;
width:40px;
height:80px;
left:244;
top:50%;
margin-top:-40px;
background:url(../img/arrow.png) no-repeat center;
}
.button:hover{
background-color:#333;
opacity:0.2;/*透明度*/
filter:alpha(opacity=80);/*兼容其它浏览器*/
}
.prev{
transform:rotate(180deg);/*旋转*/
}
.next{
left:auto;
right:0;
}.dots{
position:absolute;
right:20px;
bottom:24px;
text-align:right;
}
.dots span{
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
background-color:rgba(7,17,27,0.4);
margin-left:8px;
box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;/*设置阴影（水平 垂直 阴影距离 模糊程度
阴影颜色）*/
}
.dots span.active{
box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;
background-color:#fff;
}
//全局变量
var index = 0,
timer = null,
pics = byId("banner").getElementsByTagName("div"),
len=pics.length;
//封装一个代替getElementById()的方法
function byId (id) {
return typeof(id)==="string"?document.getElementById(id):id; /*typeof判断id是不是字符串*/
}
function slideImg(){
var main = byId("main");
//滑过清除定时器，离开继续
main.onmouseover = function (){
//滑过清除定时器
}
main.onmouseout = function(){
//setInterval:间隙调用
timer = setInterval(function(){
index++;
if(index >= len){
index = 0;
}
//切换图片
changeImg();
},2000);
}
}
//切换图片
function changeImg(){
//遍历banner下所有的div,将其隐藏
for(var i=0;i<=len;i++){
pics[i].style.display="none";
}
//根据index索引找当当前div将其显示出来
pics[index].style.display='block';
}
slideImg();
在切换图片函数中添加了for循环后，在Sources中会报错：Uncaught TypeError: Cannot read property 'style' of undefined
1回答
-
同学你好，复制运行贴出代码，出现Uncaught TypeError: Cannot read property 'style' of undefined-->是因为在changeImg方法中遍历从0开始，长度要小于数组元素的长度，否则pics[4]就是一个不存在的元素(undefined)，它对应没有style属性，所以就会报出这个错误。
修改建议如下：
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题