请问我的代码是不是JS里面的function changeImg()写错了？

html：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="zuoye.css">
</head>
<body>
    <div class="main">
        <div id="button">
        <div class="click button1" id="button1"><a href="">首页</a></div>
        <div class="click button2" id="button2"><a href="">点击看看</a></div>
        <div class="click button3" id="button3"><a href="">会自动的</a></div>
        <div class="click button4" id="button4"><a href="">我的网站</a></div>
        </div>
        <div class="image" id="image">
            <div class="pic1" id="pic1"></div>
            <div class="pic2" id="pic2"></div>
            <div class="pic3" id="pic3"></div>
            <div class="pic4" id="pic4"></div>
        </div>
    </div>
<script src="zuoye.js"></script>
</body>
</html>

CSS:
.main{
    width:800px;
    height:375px;
    position:absolute;
}
/* 菜单选项 */
.click{
    width:200px;
    height:70px;
    position: relative;
    background-color: #fff;
    background-repeat: no-repeat;
    float: left;
    font-size: 22px;
    font-weight:bold; 
    line-height: 70px;
    text-align: center;
    font-family:  Microsoft YaHei;  
}
a:link,a:visited{
    text-decoration: none;
    color: #666;
}

.click:hover{
    background-color: #ffcc00;
}
.image{
    width:800px;
    height:305px;
    margin-top: 35px;
    position:absolute;
    float: left;
}
.pic1{
    background-image: url(../作业/img/1.jpg);
    background-size: 100%;
    position: relative;
    display:none;
    width:800px;
    height:305px;
    margin-top: 35px;
}
.pic2{
    background-image: url(../作业/img/2.jpg);
    background-size: 100%;
    position: relative;
    display:none;
    width:800px;
    height:305px;
    margin-top: 35px;
}
.pic3{
    background-image: url(../作业/img/3.jpg);
    background-size: 100%;
    position: relative;
    display:none;
    width:800px;
    height:305px;
    margin-top: 35px;
} 
.pic4{
    background-image: url(../作业/img/4.jpg);
    background-size: 100%;
    position: relative;
    display:none;
    width:800px;
    height:305px;
    margin-top: 35px;
}

JS：
var button1=document.getElementById("button1"),
    button2=document.getElementById("button2"),
    button3=document.getElementById("button3"),
    button4=document.getElementById("button4"),
    pic1=document.getElementById("pic1"),
    pic2=document.getElementById("pic2"),
    pic3=document.getElementById("pic3"),
    pic4=document.getElementById("pic4"),
    image=document.getElementById("image"),
    picture=image.getElementsByTagName("div"),
    timer=null,
    index=0,
    size=picture.length,
    main=document.getElementById("main");
window.onload=startAutoPlay;
//导航切换
button1.onmouseover=function(){
    pic1.style.display="block";
}
button2.onmouseover=function(){
    pic2.style.display="block";
}
button3.onmouseover=function(){
    pic3.style.display="block";
}
button4.onmouseover=function(){
    pic4.style.display="block";
}
button1.onmouseout=function(){
    pic1.style.display="none";
}
button2.onmouseout=function(){
    pic2.style.display="none";
}
button3.onmouseout=function(){
    pic3.style.display="none";
}
button4.onmouseout=function(){
    pic4.style.display="none";
}

// 清除定时器,停止自动播放
function stopAutoPlay(){
    clearInterval(timer);
}
// 图片自动轮播
function startAutoPlay(){
timer=setInterval(function(){
    index++;
    if(index>=size){
        index=0;
    }
    changeImg();
}
    ,1000)
}
function changeImg(){
    for(var i=0;size<=i;i++){
        picture[i].display="none";
    }
    picture[index].display="block";
}
function slidImg(){
//鼠标移动到导航停止自动播放
button.onmouseover = function(){
    stopAutoPlay();
}
//鼠标离开导航开始自动播放
button.onmouseout= function(){
    startAutoPlay();
}
}
slidImg();

ninimaomao 2017-06-13

源自：项目：JavaScript实现轮播特效 6-2 作业题

收起

1回答

小于飞飞回答被采纳获得+3积分 2017-06-13 17:47:36

你还，是该函数有问题，语法错误，参考如下：

function changeImg() {
        for (var i = 0; i<size; i++) {           
            picture[i].style.display = "none";
           }
        picture[index].style.display = "block";
    }

希望对你有帮助，祝学习愉快，欢迎采纳。

收起回答