js執(zhí)行順序問(wèn)題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../csstexting/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="../csstexting/css.js"></script>
    <link rel="stylesheet" type="text/css" href="../csstexting/css.css">
</head>
<body>
    <header class="head" style="height: 30px;background: #FFE4C4;
    width: 100%"></header>
    <div class="wrap">
        <div class="wrap_div">
               <div class="wrap_div_one"></div>
               <div class="wrap_div_two"></div>
               <div class="wrap_div_three"></div>
               <div class="wrap_div_four"></div>
        </div>
        <ul class="list">
             <li class="list_one white"></li>
             <li class="list_two"></li>
             <li class="list_three"></li>
        </ul>
    </div>
</body>
</html>
*{
    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)
})

這是我仿照京東頁(yè)面寫(xiě)的輪播圖。請(qǐng)問(wèn)JS那個(gè)部分$('.list li').eq(0).addClass('white')。if內(nèi)部的執(zhí)行代碼。請(qǐng)問(wèn)為什么執(zhí)行了$('.list li').eq(0).addClass('white')這句之后。并不會(huì)被后面的$('.list li').eq(val).addClass('white')這句的效果給覆蓋掉。這是為什么啊、按照從上到下的執(zhí)行順序應(yīng)該會(huì)覆蓋才對(duì)。

回答

編輯回答

話寡

你明明是給不同的li給class，為什么會(huì)被覆蓋呢。應(yīng)該在$('.list li').eq(val).addClass('white')之前清除上一個(gè)li的class

2018年2月23日 19:14

編輯回答

撿肥皂

就算有4個(gè)li,給$('.list li').eq(0)//第一個(gè)li加效果，同時(shí)給$('.list li').eq(3)//第四個(gè)加效果二者不沖突，為什么會(huì)覆蓋？

2018年3月5日 01:43

編輯回答

嫑吢丕

if(val == 3){
    $('.list li').eq(0).addClass('white'); // 如果這里執(zhí)行，那就是第一個(gè)li被加了樣式  
}else if(val > 3){
      val = 1;
}
$('.list li').eq(val).addClass('white'); // 在執(zhí)行這里就是第四個(gè)li被加上了樣式 然而你只有三個(gè)li

2017年6月27日 18:34