index>=imglist.length&&(index=0);如何理解
这是用原生js实现轮播图中的一句代码，全部代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js实现轮播图</title>
<style type="text/css">
div,ul,body{margin:0;padding:0;}
ul,li{list-style:none;list-style-type:none;}
#box{
position:relative;
font-size:12px;
font-family:"Arial";
width:482px;
height:322px;
border:8px solid #FF9900;
border-radius:10px;
margin:20px auto;
}
.imglist{
width:480px;
height:320px;
border:1px solid #000;
position:relative;
overflow:hidden;
}
.imglist li{
width:480px;
height:320px;
position:absolute;
left:0;
top:0;
opacity:0;
transition:opacity 0.8s linear;
cursor:pointer;
}
.imglist li.current{opacity:1;}
.imglist li img{
display:block;
width:480px;
height:320px;
}
.countlist{
position:absolute;
right:10px;
bottom:5px;
clear:both;
}
.countlist li{
float:left;
margin:0 5px;
width:20px;
height:20px;
line-height:20px;
text-align:center;
background:palevioletred;
border-radius:100%;
border-radius:10px;
opacity:0.8;
cursor:pointer;
}
.countlist li.active,.countlist li:hover{background:brown;color:#fff;}
</style>
</head>
<body>
<div id="box">
<ul class="imglist">
<li class="current"><img src="img/4.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/8.jpg" /></li>
</ul>
<ul class="countlist">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var uls=box.getElementsByTagName("ul");
var imglist=uls[0].getElementsByTagName("li");
var btnlist=uls[1].getElementsByTagName("li");
var i=index=0;
var play=null;
//console.log(box,uls,imglist,btnlist);
function show(a){
for(i=0;i<imglist.length;i++){
imglist[i].style.opacity=0;
imglist[a].style.opacity=1;
}
for(i=0;i<btnlist.length;i++){
btnlist[i].className="";
btnlist[a].className="active";
}
}
for(i=0;i<btnlist.length;i++){
btnlist[i].index=i;
btnlist[i].onmouseover=function (){
show(this.index);
clearInterval(play);
}
}
function autoplay(){
play=setInterval(function (){
index++;
index>=imglist.length&&(index=0);
show(index);
},3000);
}
autoplay();
box.onmouseover=function (){
clearInterval(play);
};
box.onmouseout=function (){
autoplay();
}
</script>
</body>
</html>
如何来理解index>=imglist.length&&(index=0)；这句代码呢：
这样写或许就能明白了if(index >= imglist.length){index=0;}
上面的实例中：index++ 一直在增加 并不断和imglist.length比较 ，如果为真，后面的 index就等于0， 相当于归0 从头开始播放
"与 Java 中的逻辑 AND 运算相似，ECMAScript 中的逻辑 AND（&&） 运算也是简便运算，即如果第一个运算数决定了结果，就不再计算第二个运算数。对于逻辑 AND 运算来说，如果第一个运算数是 false，那么无论第二个运算数的值是什么，结果都不可能等于 true。"
举个简单的例子：
var m=1;
function fn(){
10>9&&(m=0);
alert(m); //弹出0，10大于9等于true，后面就开始计算，所以m=0
}
fn();
var m=1;
function fn(){
8>9&&(m=0);
alert(m); //弹出1，8不大于9等于false，后面就停止计算，所以m=1
}
fn();
这样会不会有些明白了呢
浙公网安备 33010602011771号