能实现添加display属性，但是无法实现轮播

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lunbo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!--外容器-->
<div class="main" id="main">
<!--导航菜单-->
<!-- <div class="menu-box"></div> -->
<!--轮播图-->
<div class="banner" id="banner">
<!--因为每个图片都是可以点的连接，所以要有a标签,如果不是死图可以a下加img，如果
是死图就加div，然后再在div的css里面引用图片
-->
<a href="">
<!-- 因为植入图片不一样，所以分别设置slide -->
<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>
</div>
<!-- 轮播图上的左右按钮 -->
<a href="javascript:void(0)" class="button prev"></a>
<a href="javascript:void(0)" class="button next"></a>
<!-- 圆点导航 -->
<div class="dots">
<!-- 按钮在同一行用span -->
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

//全局变量
var index = 0,
    timer = null
    pics = document.getElementById("banner").getElementsByTagName("div");
    len = pics.length;
function slideImg(){
 
    var main =document.getElementById("main");
    //滑过清除定时器，离开继续
    main.onmouseover=function(){
        //滑过清除定时器
 
    }
    main.onmouseout = function(){     
        timer = setInterval(function(){   
            index++;
            if(index >=len){
                index=0;
            }
            // 切换图片
            changeImg();
        },2000);
    }
}
//切换图片
function changeImg(){
    // 通过索引，选取到要改变的标签的索引，然后添加激活类
    pics[index].style.display ="block";
}
 
slideImg();

100

101

102

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
body{
    font-family: "微软雅黑";
}
.main{
    width: 1200px;
    height: 460px;
    /*居中*/
    margin:30px auto;
    /*超出范围的就隐藏，关键*/
    overflow: hidden;
    position: relative;
}
.banner{
    width: 1200px;
    height: 460px;
    /*超出范围的就隐藏，关键*/
    /*overflow: hidden;*/
}
.banner-slide{
    /*都是占满所以大小一样*/
    width: 1200px;
    height: 460px;
    /*都是平铺*/
    background-repeat: no-repeat;
    display: none;
}
.slide1{
    /*这里的路径是相对.css这个文件*/
    background-image: url("../img/bg1.jpg");
}
.slide2{
    /*这里的路径是相对.css这个文件*/
    background-image: url("../img/bg2.jpg");
}
.slide3{
    /*这里的路径是相对.css这个文件*/
    background-image: url("../img/bg3.jpg");
}
.slide-active{
    display: block;
}
.button{
    /*注意相对父盒子定位，他的父元素是main不是banner,
    如果不设置父元素relative就变成相对body定位，这样移动后没那么灵活*/
    position: absolute;
    width: 40px;
    height: 80px;
    left: 244px;
    top: 50%;
    margin-top: -40px;
    /*平铺，水平，水平居中*/
    background: url(../img/arrow.png) no-repeat center center;
}
/*有链接按钮的都用a，因为a还可以设置hover*/
.button:hover{
    background-color: #333;
    opacity: 0.8;
    /*ie的透明度*/
    filter: alpha(opacity=80);
}
.prev{
    transform: rotate(180deg);
}
.next{
    /*因为之前设置了left，所以先让left自由*/
    left: auto;
    right: 0;
 
}
 
.dots{
    position: absolute;
    right: 20px;
    bottom: 24px;
    /*靠右对齐*/
    text-align: right;
}
.dots span{
    /*span把一行划分为几个部分，但是想让他显示宽高，就要让他block*/
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    /*rgba可以设置透明度，所以一般用这个设置颜色，这样就能根据背景颜色变化颜色*/
    background: rgba(7,17,27,0.4);
    margin-right: 8px;
    line-height: 12px;
    /*添加阴影 ：水平 垂直 阴影距离 模糊程度 颜色 内置/外置*/
    box-shadow:  0 0 0 2px rgba(255,255,255,0.8) inset;
    cursor: pointer;
}
.dots .active{
    background: #fff;
    box-shadow:  0 0 0 2px rgba(7,17,27,0.4) inset;
}

莨菽菽 2017-06-15

源自：项目：JS实现轮播特效 3-4 图片自动轮播

收起

3回答

小于飞飞回答被采纳获得+3积分 2017-06-16 11:38:59

你好，根据代码，进行调整和建议，与自己代码对比，同时看新添加的注释内容：

var index = 0,
        timer = null,
        pics = document.getElementById("banner").getElementsByTagName("div"),
        len = pics.length;
    function slideImg() {
        var main = document.getElementById("main");
        //滑过清除定时器，离开继续
        main.onmouseover = function() {
            //滑过清除定时器
            clearInterval(timer); //添加该语句，如没有该语句，每次触发一个定时器，所以会乱。
        }
        main.onmouseout = function() {
            timer = setInterval(function() {
                index++;
                if (index >= len) {
                    index = 0;
                }
                // 切换图片
                changeImg();
            }, 2000);
        }
        main.onmouseout();  // 添加该语句，让其进来时执行定时轮播图片。
    }
    //切换图片
    function changeImg() {
        // 通过索引，选取到要改变的标签的索引，然后添加激活类
        for (var i = 0; i < len; i++) {
            pics[i].style.display = "none"; // 添加先将所有的都不显示，然后在指定显示的，没有这个，由于html 显示，覆盖相应的内容。
        }
        pics[index].style.display = "block";
    }
    slideImg();