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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

<!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