Слайд-шоу, не показывающее стрелки влево/вправо

У меня есть четыре слайд-шоу на моем сайте, и до того, как я добавил функцию 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

Ваш код работает нормально, то вам просто нужно добавить г-индексное свойство со стрелками изображений так, что она оказывается над изображением и я также имею прокомментировал элемент точек, поскольку на данный момент его не было.

Вот это рабочий фрагмент кода

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

Слайд-шоу, не показывающее стрелки влево/вправо

ответ

Смежные вопросы