87,987
社区成员
发帖
与我相关
我的任务
分享为什么轮播图会报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
ul{
position: absolute;
list-style: none;
width:700%;
margin-left:-100%;
}
.box{
position: relative;
overflow: hidden;
}
li{
float:left;
width: 14.2857142857%;
}
img{
width:100%;
}
ol li{
float:left;
width:8px;
height:7px;
background-color: rgb(230, 20, 20);
margin: 0 2px;
}
ol{
position: absolute;
list-style: none;
bottom: 10px;
right: 0px;
}
.current{
width:14px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="D:\移动轮播图\0zg661200089ujm41573B.jpg"></li>
<li><img src="D:\移动轮播图\0zg0e1200086r5x0f7604.jpg"></li>
<li><img src="D:\移动轮播图\0zg2a120008c1ikqo1DBF.jpg"></li>
<li><img src="D:\移动轮播图\0zg4r120008ajddq26A07.jpg"></li>
<li><img src="D:\移动轮播图\0zg33120008ab97e0D9E2.jpg"></li>
<li><img src="D:\移动轮播图\0zg661200089ujm41573B.jpg"></li>
<li><img src="D:\移动轮播图\0zg0e1200086r5x0f7604.jpg"></li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
var ul=document.querySelector('ul');
var box=document.querySelector('.box');
var ol=document.querySelector('ol');
window.onload = function () {
height = ul.offsetHeight;
box.style.height = height + "px";
}
window.onresize = function () {
height = ul.offsetHeight;
box.style.height = height + "px";
}
window.addEventListener('load',function(){
var width= box.offsetWidth;
index=0;
setInterval(function(){
ol.querySelector('.current').classList.remove('current');
index++;
ol.children[index].classList.add('current');
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + -width*index + 'px)';
},2000)
ul.addEventListener('transitionend',function(){
if(index>=5){
ul.style.transition='none';
index=0;
ul.style.transform='translateX('+-width*index+'px)';
ol.children[index].classList.add('current');
}
else if(index<0){
ul.style.transition='none';
index=4;
ul.style.transform='translateX('+-width*index+'px)';
}
})
})
</script>
</body>
</html>
为什么最后在84行处代码报错啊(TypeError: Cannot read property 'classList' of undefined)
...全文
请发表友善的回复…
发表回复
howcoder 2020-12-25
- 打赏
- 举报
首先遇到这些问题，你可以打印结果排查原因
现在知道什么原因了吧，你的index一直增加，当大于6的时候，超出了数组的索引范围
现在知道什么原因了吧，你的index一直增加，当大于6的时候，超出了数组的索引范围
weixin_50944805 2020-12-25
- 打赏
- 举报
在代码84行上面加
index = index >= ol.children.length ? 0 : index
