麻烦老师看下代码哪里出错了？控制台也没有输出。

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <div class="main" id="main">
        <!--图片轮播-->
        <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>
        </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></span>
            <span></span>
        </div>
    </div>
    <script type="text/javascripts" src="js/js1.js"></script>
</body>

</html>

function byId(id){
    return typeof(id)==="string"?document.getElementById(id):id;    //三目运算符 a?b:c,如果id是字符串，则返回document.getElementById(id),否则返回id
}

// 全局变量
var index = 0,
    timer = null,
    pics = byId("banner").getElementsByTagName("div"),
    len = pics.length;

console.log(byId("main"));
console.log(byId("banner"));

function slideImg(){
    var main = byId("main");
    //滑过清除定时器，离开继续
    main.onmouseover = function(){
        //滑过清除定时器
    }
    main.onmouseout = function(){
        timer = setInterval(function(){
            index++;
            if(index >= len){
                index = 0;
            }
            //切换图片
            changeImg();
        },3000)
    }
}

// 切换图片
function changeImg(){
    for(var i = 0; i < len; i++){
        pics[i].style.display = "none";
    }
    pics[index].style.display = "block";
}

slideImg();


*{
    margin: 0;
    padding: 0;
}
.body{
    font-family: 微软雅黑;
    color: #14191e;
}
.main{
    width: 1200px;
    height: 460px;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}
.banner{
    width: 1200px;
    height: 460px;
    position: relative;
}
.banner-slide{
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    position: absolute;
    display: none;
}
.slide1{
    background-image: url("../img/bg1.jpg");
}
.sldie2{
    background-image: url("../img/bg2.jpg");
}
.slide3{
    background-image: url("../img/bg3.jpg");
}
.slide-active{
    display: block;
}
.button{
    position: absolute;
    width: 40px;
    height: 80px;
    left: 244px;
    top: 50%;
    margin-top: -40px;
    background: url("../img/arrow.png") no-repeat center center;
}
.button:hover{
    background-color: rgba(70, 59, 59, 0.4);
}
.prev{
    transform: rotate(180deg);
}
.next{
    left: auto;
    right: 0px;
}
.dots{
    position: absolute;
    right: 20px;
    bottom: 20px;
    text-align: right;
}
.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    background-color: rgba(7,17,27,0.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
    margin-left: 10px;
    cursor: pointer;
}
.dots span.active{
    box-shadow: 0 0 0 2px rgba(1,17,27,0.4) inset;
    background: rgba(255,255,255,0.8);
}

慕无忌1192597 2019-11-28

源自：项目：JavaScript轮播图 3-4 图片自动轮播

收起

1回答

提问者慕无忌1192597 2019-11-28 10:48:44

找到问题了，引用<script type="text/javascript" src="js/js1.js"这里多写了一个s。

但是现在运行起来图片切换中间会有一小段间隔，出现白屏再出现图片。这是代码哪里写的不合适吗？

收起回答

提问者慕无忌1192597 #1

就是banner下的第二个div，运行时style已经显示为block了，但是图片没有显示。麻烦老师帮我看下哪里还有问题？

2019-11-28 11:03:19
提问者慕无忌1192597 #2

找到原因了，太粗心了，css文件中有个写错了 :-(

2019-11-28 12:30:53
好帮手慕柯南回复提问者慕无忌1192597 #3

同学很棒，自己解决了问题，加油，祝学习愉快~

2019-11-28 16:17:06