php和js执行顺序,js执行顺序问题

Document

*{

padding: 0;

margin: 0;

list-style: none;

}

.list .white{

background: #fff

}

.list{

overflow: hidden;

position: absolute;

top: 500px;

left: 430px;

z-index: 10

}

.list li{

background: rgba(255,255,255,.3);

border: 1px solid #fff;

border-radius: 50%;

width: 15px;

height: 15px;

float: left;

margin: 5px 20px;

}

.wrap{

width: 500px;

height: 500px;

margin: 10px auto;

overflow: hidden;

}

.wrap_div{

left: 0px;

width: 2000px;

height: 500px;

}

.wrap_div div{

float: left;

width: 500px;

height: 500px;

position: relative;

transition: opacity 500ms ease-in-out;

}

.wrap_div_one{

background: url(https://m.360buyimg.com/babel/jfs/t13342/35/2396024346/99047/e45736fb/5a56bf6eN8cc15233.jpg)no-repeat;

background-size: 500px 500px;

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: 500px 500px;

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: 500px 500px;

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: 500px 500px;

left: -1500px;

opacity: 0;

z-index: 0

}

$(document).ready(function(){

var val = 0;

var timer;

function move(){

$('.wrap_div div').css({opacity:0,zIndex:0});

$('.list li').removeClass('white');

val++;

***if(val == 3){

$('.list li').eq(0).addClass('white');

}else if(val > 3){

val = 1;

}

$('.list li').eq(val).addClass('white');***

$('.wrap_div div').eq(val).css({opacity:1,zIndex:1});

// $('.wrap_div').css({left : val*500*-1});

timer = setTimeout(move,6000)

}

setTimeout(move,3000)

})

这是我仿照京东页面写的轮播图。请问JS那个部分$('.list li').eq(0).addClass('white')。if内部的执行代码。请问为什么执行了$('.list li').eq(0).addClass('white')这句之后。并不会被后面的$('.list li').eq(val).addClass('white')这句的效果给覆盖掉。这是为什么啊、按照从上到下的执行顺序应该会覆盖才对。