幻燈片不顯示左/右箭頭

我在我的網站上有四個幻燈片，並且在我添加jQuery功能Backstretch之前，它們都工作正常。現在左右箭頭出現圓形和黑色 - 但是當箭頭圖像被拖入新選項卡時，您可以看到它應該是。
幻燈片不顯示左/右箭頭

這裏是我的幻燈片代碼：

<div dir="ltr" style="text-align: left;" trbidi="on"> 
<center> 

<html> 
<title>W3.CSS</title> 

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"></link> 
<style> 
.mySlides {display:none} 
</style> 
<body> 

<div class="w3-container"> 
</div> 
<div class="w3-content" style="max-width: 771px;"> 

    <img class="mySlides" src="https://1.bp.blogspot.com/-M7Z6DU_4rr4/WH854ptAAnI/AAAAAAAAfxk/lT87QTRG-K8IV_KT0bp4rNOpdI2c2Z3xgCLcB/s1600/A.jpg" style="width: 771px;" /> 
    <img class="mySlides" src="https://2.bp.blogspot.com/-os3VKF2UqTY/WH86xNs-pjI/AAAAAAAAfzk/vbnk731lmio-YwBYtybdtyEwLWR2H0HuQCLcB/s1600/Z25.jpg" style="width: 771px;" /> 
    <img class="mySlides" src="https://1.bp.blogspot.com/-q-mfkdFqElk/WH86yBXX2nI/AAAAAAAAfzo/GT8IOltOyho76hyksDTl89L9yJ2pfG0mwCLcB/s1600/Z30.jpg" style="width: 771px;" /> 


<a class="w3-btn-floating" onclick="plusDivs(-1)" style="left: 0; position: absolute; top: 45%;"><img src="https://1.bp.blogspot.com/-9TRFDOt59CI/Vz4EANpBSuI/AAAAAAAAdbY/wn8hFl3KfGAdq5jqeE1XZ00STJDBPaRoQCLcB/s1600/left.png" style="height: 22px; width: 16px;" /></a> 
<a class="w3-btn-floating" onclick="plusDivs(1)" style="position: absolute; right: 0; top: 45%;"><img src="https://3.bp.blogspot.com/-0oFX79ip8cY/Vz4EAMYwacI/AAAAAAAAdbU/429-hZhCwhAEZOWn7bqVb1Ze7Ub0h-1FgCLcB/s1600/right.png" style="height: 22px; width: 16px;" /></a> 

</div> 
<script> 
var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function currentDiv(n) { 
    showDivs(slideIndex = n); 
} 

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo"); 
    if (n > x.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = x.length} ; 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" w3-border-red", ""); 
    } 
    x[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " w3-border-black"; 
} 
</script> 

</body> 
</html> 
</center> 
</div>

來源

2017-02-17 Leela

你的代碼工作正常，你只需要Z-index屬性添加到您的箭頭圖像，使其呈現在圖像上，我也有因爲現在沒有，所以評論了這個點的元素。

這裏的工作片段

var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("demo"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} ; 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" w3-border-red", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
// dots[slideIndex-1].className += " w3-border-black"; 
 
// since you dont have any element with name demo this returns error 
 
}

  .mySlides { 
 
       display: none 
 
      }

<div dir="ltr" style="text-align: left;" trbidi="on"> 
 
    <center> 
 

 
     <html> 
 
     <title>W3.CSS</title> 
 

 
     <link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet"></link> 
 

 
     <body> 
 

 
      <div class="w3-container/"> 
 
      <div class="w3-content" style="max-width: 771px;"> 
 

 
       <img class="mySlides" src="https://1.bp.blogspot.com/-M7Z6DU_4rr4/WH854ptAAnI/AAAAAAAAfxk/lT87QTRG-K8IV_KT0bp4rNOpdI2c2Z3xgCLcB/s1600/A.jpg" 
 
        style="width: 771px;" /> 
 
       <img class="mySlides" src="https://2.bp.blogspot.com/-os3VKF2UqTY/WH86xNs-pjI/AAAAAAAAfzk/vbnk731lmio-YwBYtybdtyEwLWR2H0HuQCLcB/s1600/Z25.jpg" 
 
        style="width: 771px;" /> 
 
       <img class="mySlides" src="https://1.bp.blogspot.com/-q-mfkdFqElk/WH86yBXX2nI/AAAAAAAAfzo/GT8IOltOyho76hyksDTl89L9yJ2pfG0mwCLcB/s1600/Z30.jpg" 
 
        style="width: 771px;" /> 
 

 

 
       <a class="w3-btn-floating" onclick="plusDivs(-1)" style="left: 0; position: absolute; top: 45%; z-index: 2;"><img src="https://1.bp.blogspot.com/-9TRFDOt59CI/Vz4EANpBSuI/AAAAAAAAdbY/wn8hFl3KfGAdq5jqeE1XZ00STJDBPaRoQCLcB/s1600/left.png" 
 
         style="height: 22px; width: 16px;" /></a> 
 
       <a class="w3-btn-floating" onclick="plusDivs(1)" style="position: absolute; right: 0; top: 45%; z-index: 2;"><img src="https://3.bp.blogspot.com/-0oFX79ip8cY/Vz4EAMYwacI/AAAAAAAAdbU/429-hZhCwhAEZOWn7bqVb1Ze7Ub0h-1FgCLcB/s1600/right.png" 
 
         style="height: 22px; width: 16px;" /></a> 
 

 
      </div> 
 

 
     </body> 
 

 
     </html> 
 
    </center> 
 
</div>

來源

2017-02-17 19:53:57 warl0ck

謝謝！但是，我恐怕我必須太累，不能清晰地思考（或者一般來說太缺乏經驗） - 我將代碼原樣複製並粘貼到我的網站上，似乎不起作用？ – Leela

無論你有什麼代碼共享它的工作，你可以看到在這裏的代碼片段，如果有任何其他問題，請分享確切的問題 – warl0ck

是的，我可以看到你提供的代碼確實工作（當我點擊「運行代碼片段」），但是當我將它複製並粘貼到我的博客上時，按照它在帖子中的順序，它不起作用。 – Leela

幻燈片不顯示左/右箭頭

回答

相關問題