幻灯片显示左/右箭头

Question

我的网站上有四个幻灯片，在我添加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>

Answer 1

您的代码工作正常，您只需要在箭头图像中添加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>