有人可以幫我在這裏這個代碼dosent工作？

-1

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8" content="text/html" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="Stylesheet" type="text/css" href="styles/grabel-home.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="js/slide.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="container"> 
     <div id="slider"> 
      <img src="images/1.png" alt="" id="1" /> 
      <img src="images/2.png" alt="" id="2" /> 
      <img src="images/3.png" alt="" id="3" /> 
      <img src="images/4.png" alt="" id="4" /> 
      <img src="images/1.png" alt="" id="5" /> 
     </div> 
    </div> 
</body> 
</html>

，這是我的CSS文件

* { 
    margin: 0px; 
    padding: 0px; 
    font-family: Calibri; 
} 

#container { 
    width: 100%; 
    height: 300px; 
} 

#slider { 
    width: 100%; 
    height: 300px; 
} 

#slider img { 
    width: 100%; 
    height: 300px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

#1 { 
    z-index: 10; 
} 

#2 { 
    z-index: 20; 
} 

#3 { 
    z-index: 30; 
} 

#4 { 
    z-index: 40; 
} 

#5 { 
    z-index: 50; 
}

，這是我的JavaScript文件

$(document).ready(function(){ 

    var currentImg = 1; 
    var animationSpeed = 4000; 
    var index = 60; 

    setInterval(function(){ 
     $("#"+currentImg).css("zIndex", index); 
     index = index + 10; 
     currentImg++; 
     if(currentImg == 5){ 
      $("#1").css("zIndex", "10"); 
      $("#2").css("zIndex", "20"); 
      $("#3").css("zIndex", "30"); 
      $("#4").css("zIndex", "40"); 
      $("#5").css("zIndex", "50"); 
      currentImg = 1; 
     } 
    }, pause); 
});

現在討好的問題是，我把所有圖片彼此作爲每個不同的z-索引層，我想讓這個代碼之間交換，如果它是滑塊你得到它？！但是這段代碼似乎不起作用。爲什麼？並在此先感謝

來源

2016-04-02 Ahmed Nader

您是否嘗試過調試它？發生什麼樣的錯誤？ – RhinoDevel

使用數字作爲ID或類是一個壞主意。 –

我試圖調試它||||爲什麼數字不好？ –

當使用JavaScript來改變一個元素的屬性，我會用原生方式：

document.getElementById(id).style.zIndex=1;

這是很多更可靠。另外，使用z索引時，您需要確保position屬性已設置。（像position:absolute）

來源

2016-04-02 19:44:22 Wolfsmash

好的概念，但沒有工作呢！ –

哥們你試過我說的嗎？ – Wolfsmash

是的，但沒有工作 –

試試這個，希望這有助於.. :)

$(document).ready(function() { 
 

 
    var currentImg = 0; 
 
    var animationSpeed = 2000; 
 
    var v, play = "play"; 
 
    initSlider(play); 
 

 
    function initSlider(type) { 
 
    clearInterval(v); 
 

 
    if (type == "pause") { 
 
     clearInterval(v); 
 
    } else if (type == "next") { 
 
     var n = currentImg; 
 
     currentImg < $('.slideImg').length - 1 ? n = currentImg + 1 : n = 0; 
 
     $('.slideImg').removeClass('active').eq(n).addClass('active'); 
 
     currentImg = n; 
 
     initSlider(play); 
 

 
    } else if (type == "prev") { 
 

 
     var p = 0; 
 
     currentImg > $('.slideImg').length - 1 ? p = 0 : p = currentImg - 1; 
 

 
     $('.slideImg').removeClass('active').eq(p).addClass('active'); 
 
     currentImg = p; 
 

 
     initSlider(play); 
 

 
    } else if (type == "play") { 
 

 
     v = setInterval(function() { 
 
     $('.slideImg').removeClass('active').eq(currentImg).addClass('active') 
 
     currentImg++; 
 
     if (currentImg > $('.slideImg').length - 1) { 
 
      currentImg = 0; 
 
      $('.slideImg').removeClass('active').eq(0).addClass('active'); 
 
     }; 
 

 
     }, animationSpeed); 
 
    } 
 
    }; 
 

 
    /*@@Controls code slider will work even without this*/ 
 
    $('.ctrlWrapper .ctrl').on('click', function() { 
 

 
    if ($(this).hasClass('play')) { 
 
     initSlider("play"); 
 
     $('.ctrlWrapper .ctrl').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    } else if ($(this).hasClass('next')) { 
 
     initSlider("next"); 
 
     $('.ctrlWrapper .ctrl').removeClass('active'); 
 
     $('.ctrlWrapper .ctrl.play').addClass('active'); 
 
    } else if ($(this).hasClass('prev')) { 
 
     initSlider("prev"); 
 
    } else if ($(this).hasClass('pause')) { 
 
     initSlider("pause"); 
 
     $('.ctrlWrapper .ctrl').removeClass('active'); 
 
     $('.ctrlWrapper .ctrl.play').addClass('active'); 
 
     $('.ctrlWrapper .ctrl').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    }; 
 

 
    }); 
 

 
    /*@@slide Control code ends here*/ 
 

 
});

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-family: Calibri; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 
#slider { 
 
    width: 100%; 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 
#slider img { 
 
    width: 100%; 
 
    height: 300px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 1; 
 
    opacity: 0; 
 
    -webkit-transition: opacity ease 1s; 
 
    -moz-transition: opacity ease 1s; 
 
    -o-transition: opacity ease 1s; 
 
    transition: opacity ease 1s; 
 
} 
 
#slider img.active { 
 
    opacity: 1; 
 
    z-index: 2; 
 
    transition: opacity ease 1s; 
 
} 
 
.ctrlWrapper { 
 
    padding: 5px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.ctrlWrapper .ctrl { 
 
    display: inline-block; 
 
    padding: 5px 10px; 
 
    background: #eee; 
 
    cursor: pointer; 
 
    border: 1px solid #C7C7C7; 
 
    transition: all ease .3s; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
.ctrlWrapper .ctrl:hover { 
 
    background: #888; 
 
    color: #fff; 
 
    border-color: #000; 
 
} 
 
.ctrlWrapper .ctrl.active { 
 
    background: #FF9800; 
 
    color: #000; 
 
    border-color: #607D8B; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="slider"> 
 
    <img class="slideImg active" src="http://lorempixel.com/580/250/nature/1/" alt="" id="1" /> 
 
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/2/" alt="" id="2" /> 
 
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/3/" alt="" id="3" /> 
 
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/4/" alt="" id="4" /> 
 
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/5/" alt="" id="5" /> 
 
    </div> 
 
</div> 
 
<div class="ctrlWrapper"> 
 
    <div class="ctrl next">Next</div> 
 
    <div class="ctrl prev">Prev</div> 
 
    <div class="ctrl play active">Play</div> 
 
    <div class="ctrl pause">Pause</div> 
 
</div>

來源

2016-04-02 20:53:11

有人可以幫我在這裏這個代碼dosent工作？

回答

相關問題