Javascript滑塊不滾動

我已經構建了基於w3 html 5演示的圖像滑塊。當我加載頁面時，第一個可用圖像顯示在屏幕上。當我點擊左邊或右邊的按鈕時，下面的圖像不會顯示，如您在這裏看到的。你知道如何解決這個問題嗎？Javascript滑塊不滾動

https://valuerent.co.uk/DLA/template/preview_property.php?property=135

代碼

// Slideshows 
 
var slideIndex = 1; 
 
function plusDivs(n) { 
 
slideIndex = slideIndex + n; 
 
showDivs(slideIndex); 
 
} 
 
function showDivs(n) { 
 
var x = document.getElementsByClassName("mySlides"); 
 
if (n > x.length) {slideIndex = 1}  
 
if (n < 1) {slideIndex = x.length} ; 
 
for (i = 0; i < x.length; i++) { 
 
x[i].style.display = "none"; 
 
} 
 
x[slideIndex-1].style.display = "block"; 
 
} 
 
showDivs(1);

<div class="w3-content" style="position:relative"> 
 
\t \t 
 
\t \t <img class="mySlides w3-animate-opacity" src="property_images/houses1.jpg" style="width: 100%; display: none;"> 
 
\t \t <img class="mySlides w3-animate-opacity" src="property_images/houses2.jpg" style="width: 100%; display: none;"> 
 
\t \t <img class="mySlides w3-animate-opacity" src="property_images/houses3.jpg" style="width: 100%; display: block;"> 
 
\t \t <img class="mySlides w3-animate-opacity" src="property_images/houses4.jpg" style="width: 100%; display: none;"> 
 
\t \t <a class="w3-button w3-circle w3-hover-dark-grey" style="position:absolute;top:45%;left:0;" onclick="plusDivs(-1)">❮</a> 
 
\t \t <a class="w3-button w3-circle w3-hover-dark-grey" style="position:absolute;top:45%;right:0;" onclick="plusDivs(+1)">❯</a> 
 
</div>

來源

2017-10-22 Nathan McIntosh

刪除/修復在頁面上導致javascript錯誤的代碼。看起來像第184行mybtn.click（）;由於var mybtn = document.getElementsByClassName（「testbtn」）[0];'不會返回任何東西。 –

這裏有一個例子可以幫助你：如果你正在使用jQuery 並希望動態例子來看看這個example

var slideIndex = 0; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    function minusDivs() { 
 
     if(slideIndex==0){ 
 
     slideIndex = x.length-1; 
 
     }else{ 
 
     slideIndex--; 
 
     } 
 
    showimg(slideIndex); 
 
    } 
 
    
 
    function plusDivs(){ 
 
    if(slideIndex==x.length-1){ 
 
     slideIndex = 0; 
 
    }else{ 
 
     slideIndex++; 
 
    } 
 
    showimg(slideIndex); 
 
    } 
 
    function showimg(n) { 
 
    for(var i=0; i<x.length; i++) { 
 
     x[i].style.display = "none"; 
 
    } 
 
    x[n].style.display = "block"; console.log(x[n]); 
 
    } 
 
showimg(slideIndex);

<div class="w3-content" style="position:relative; width:500px; margin:auto"> 
 
    <img class="mySlides w3-animate-opacity" src="property_images/houses1.jpg" style="width: 100%; display: none;"> 
 
    <img class="mySlides w3-animate-opacity" src="property_images/houses2.jpg" style="width: 100%; display: none;"> 
 
    <img class="mySlides w3-animate-opacity" src="property_images/houses3.jpg" style="width: 100%; display: block;"> 
 
    <img class="mySlides w3-animate-opacity" src="property_images/houses4.jpg" style="width: 100%; display: none;"> 
 
    <a class="w3-button w3-circle w3-hover-dark-grey" style="position:absolute;top:45%;left:0;" onclick="minusDivs()">❮</a> 
 
    <a class="w3-button w3-circle w3-hover-dark-grey" style="position:absolute;top:45%;right:0;" onclick="plusDivs()">❯</a> 
 
</div>

來源

2017-10-22 02:14:22

Javascript滑塊不滾動

回答

相關問題