你好 1.图片自动轮播不了不知问题所在 2.if(timer)这一步为真代表着什么？怎样是真和假

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

161

162

163

164

165

166

167

168

169

170

171

172

//HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="css/轮播图.css">
</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 prve"></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/javascript" src="js/script.js"></script>
</body>
</html>
 
 
//CSS
*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
body{
    font-family: "微软雅黑";
    color:#14191e;
 
}
.main{
    width:1200px;
    height: 460px;
    margin:30px auto;
    overflow:hidden;
    position: relative;
}
.main .banner{
    width:1200px;
    height:460px;
    overflow:hidden;
    position: relative;
}
.main .banner .banner-slide{
    width:1200px;
    height:460px;
    background-repeat: no-repeat;
    position: absolute;
    display: none;
}
.main .banner .slide-active{
    display: block;
}
/*相对路径是相对于当前文件 轮播图.css*/
.main .banner .slide1{
    background-image:url("../img/bg1.jpg");
}
.main .banner .slide2{
    background-image: url("../img/bg2.jpg");
}
.main .banner .slide3{
    background-image: url("../img/bg3.jpg");
}   
.main .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: #333;/*灰色*/
    opacity: 0.8;
    filter: alpha(opacity=80);
}
/*旋转180度*/
.main .prve{
    transform: rotate(180deg);
}
.main .next{
    /*上面设置过了left 需要覆盖 left比right先起作用*/
    left:auto;
    right:0;
}
.main .dots{
    position: absolute;
    right:20px;
    bottom:24px;
    text-align: right;
}
.main .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:8px;
    cursor: pointer;
}
.main .dots .active{
    box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;
    background:#fff;
}
 
 
//SCRIPT
//封装getElementById()的方法
function byId(id){
    return typeof(id)==="string"?document.getElementById(id):id;
}
// console.log(byId("main"));
//实现自动轮播，当鼠标悬浮时暂停，离开时继续
var main=byId("main"),
    pics=byId("banner").getElementsByTagName("div"),
    index=0,
    timer=null,
    len=pics.length;
 
    function slideImg(){
        滑过清除计时器 离开继续 是我不理解的地方
        main.onmouseover=function(){
            if(timer)
                clearInterval();
        }
        离开时
        main.onmouseout=function(){
            timer=setInterval(function{
                index++;
                if(index=len)
                    index=0;
                changeImg();
            },3000);
             
        }
        main.onmouseout();
    }
    function changeImg(){
        //遍历banner下的多个div将其隐藏
        for(var i=0;i<len;i++){
            pics[index].style.display:none;
        }
        //根据index找到当前div将其显示出来
        pics[index].style.display:block;
    }
    slideImg();

DemonWu 2018-11-02

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

收起

1回答

好帮手慕阿莹回答被采纳获得+3积分 2018-11-02 18:20:26

1、

1）

首先添加变量：

1	`dots = document.getElementsByClassName("dots")[0].getElementsByTagName("span")`

2）添加括号

3） pics[index].style.display:none; 应改为 pics[i].style.display = "none";

pics[index].style.display:block; 同理

4）

下图红框中的len不是一样的，下边的红框应该是

dots.length。（我们在第一条建议中获取了dots变量）

5）、在clearInteral（）中传入参数timer

修改后的js如下：

js：

   var main=byId("main"),
    pics=byId("banner").getElementsByTagName("div"),
    index=0,
    timer=null,
    dots = document.getElementsByClassName("dots")[0].getElementsByTagName("span"),
    len=pics.length;
  
  
 
//封装getElementById()的方法
function byId(id){
    return typeof(id)==="string"?document.getElementById(id):id;
}
// console.log(byId("main"));
//实现自动轮播，当鼠标悬浮时暂停，离开时继续
 //滑过清除计时器 离开继续 是我不理解的地方
       
  
    function slideImg(){
         
         main.onmouseover=function(){
            if(timer)
             clearInterval(timer);
        }
        //离开时
        main.onmouseout=function(){
            timer=setInterval(function(){
                index++;
                if(index>=len){
                index=0;
                }
                changeImg();
            },3000);
              
        }
        main.onmouseout();
    }
     
     
    function changeImg(){
        for(var i=0,len1=dots.length;i<len1;i++){
            dots[i].className = "";
            pics[i].style.display = "none";
        }
        dots[index].className = "active";
        pics[index].style.display = "block";
    }
    slideImg();

2 关于“ if(timer)这一步为真代表着什么？怎样是真和假 ”

1）、if(timer)这一步为真的的话执行clearInterval();这个方法。

2）、

js中表示布尔类型的数值不只是true和false，还有其他的

If 语句判断为false的变量值为false, 例如： 0, 0.0, null, undefined

其他变量值判断为true，例如：true, 1, [任何字串/数字]

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

DemonWu 提问者 #1

你好 var timer =null;所以一开始if(timer)是假的，但后来绑定了事件，不再为null了，所以变成真了。可以这样理解吗？还有一个问题，就是为什么要加if(timer)语句，不加会有什么影响？

2018-11-03 15:37:14
好帮手慕阿莹回复提问者 DemonWu #2

理解的没错，加if(timer)语句是变成真的后，才会执行clearInterval();这个方法。if()语句如果不加括号，默认它下边的第一句是在if语句中。例如： if(timer){ clearInterval(); }如果我的回答解决了你的问题,请采纳,祝学习愉快.

2018-11-04 10:13:51