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

//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）

首先添加变量：

    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