js执行顺序问题

Question

Document*{padding:0;margin:0;list-style:none;}.list.white{background:#fff}.list{overflow:hidden;position:absolute;top:500px;left:430px;z-index:10}.listli{background:rgba(255,255,255,.3);border:1pxsolid#fff;border-radius:50%;width:15px;height:15px;float:left;margin:5px20px;}.wrap{width:500px;height:500px;margin:10pxauto;overflow:hidden;}.wrap_div{left:0px;width:2000px;height:500px;}.wrap_divdiv{float:left;width:500px;height:500px;position:relative;transition:opacity500msease-in-out;}.wrap_div_one{background:url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;background-size:500px500px;left:0;opacity:1;z-index:1}.wrap_div_two{background:url(https://m.360buyimg.com/babel/jfs/t16165/207/1607854073/57122/3438f9c5/5a5ece4fN9efbf994.jpg)no-repeat;background-size:500px500px;left:-500px;opacity:0;z-index:0}.wrap_div_three{background:url(https://img1.360buyimg.com/da/jfs/t17290/105/25936701/79615/ceb9025a/5a5830edNb29eb37c.jpg)no-repeat;background-size:500px500px;left:-1000px;opacity:0;z-index:0}.wrap_div_four{background:url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;background-size:500px500px;left:-1500px;opacity:0;z-index:0}$(document).ready(function(){varval=0;vartimer;functionmove(){$('.wrap_divdiv').css({opacity:0,zIndex:0});$('.listli').removeClass('white');val++;***if(val==3){$('.listli').eq(0).addClass('white');}elseif(val>3){val=1;}$('.listli').eq(val).addClass('white');***$('.wrap_divdiv').eq(val).css({opacity:1,zIndex:1});//$('.wrap_div').css({left:val*500*-1});timer=setTimeout(move,6000)}setTimeout(move,3000)})这是我仿照京东页面写的轮播图。请问JS那个部分$('.listli').eq(0).addClass('white')。if内部的执行代码。请问为什么执行了$('.listli').eq(0).addClass('white')这句之后。并不会被后面的$('.listli').eq(val).addClass('white')这句的效果给覆盖掉。这是为什么啊、按照从上到下的执行顺序应该会覆盖才对。

Answer 1

if(val==3){
$('.listli').eq(0).addClass('white');//如果这里执行，那就是第一个li被加了样式
}elseif(val>3){
val=1;
}
$('.listli').eq(val).addClass('white');//在执行这里就是第四个li被加上了样式然而你只有三个li
                            

Answer 2

你明明是给不同的li给class，为什么会被覆盖呢。应该在$('.listli').eq(val).addClass('white')之前清除上一个li的class