मैंने मैन्युअल स्लाइड शो के लिए w3 स्कूल ट्यूटोरियल के बाद एक मूल छवि गैलरी बनाई है। मैं छवियों को आगे बढ़ाने के लिए setInterval() का उपयोग करके कुछ कार्यक्षमता जोड़ने की कोशिश कर रहा हूं, भले ही उपयोगकर्ता बटन पर क्लिक न करे। हालांकि इंटरवल पर कुछ होता नहीं दिख रहा है। स्लाइड्स को आगे बढ़ाने के लिए टाइमर प्राप्त करने में किसी भी मार्गदर्शन की बहुत सराहना की जाएगी!

<div align="center">
 <div class="slideViewer">
    <img class="slides" src="images/dragonborn.jpg" style="width:50%">
    <img class="slides" src="images/mountain.jpg" style="width:50%">
    <img class="slides" src="images/nords.jpg" style="width:50%">
    <img class="slides" src="images/dragon.jpg" style="width:50%">

    <button class="display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="display-right" onclick="plusDivs(1)">&#10095;</button>
  </div>
</div>

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

var timer = setInterval(plusDivs(1), 1000);


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

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slides");
    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";
}
</script>
2
Justiciar 3 अप्रैल 2018, 00:24

2 जवाब

सबसे बढ़िया उत्तर

आपको setInterval एक फ़ंक्शन पास करने की आवश्यकता है-- अपने कोड में फ़ंक्शन को कॉल करके, आप फ़ंक्शन पास नहीं कर रहे हैं, बल्कि एक कॉल का परिणाम है। इसके बजाय, एक अनाम फ़ंक्शन पास करें जो तब निष्पादित करता है जो आप करना चाहते हैं:

<div align="center">
 <div class="slideViewer">
    <img class="slides" src="images/dragonborn.jpg" style="width:50%">
    <img class="slides" src="images/mountain.jpg" style="width:50%">
    <img class="slides" src="images/nords.jpg" style="width:50%">
    <img class="slides" src="images/dragon.jpg" style="width:50%">

    <button class="display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="display-right" onclick="plusDivs(1)">&#10095;</button>
  </div>
</div>

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

var timer = setInterval(function () {
    plusDivs(1);
}, 1000);


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

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slides");
    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";
}
</script>
2
Alexander Nied 2 अप्रैल 2018, 21:27

किसी फ़ंक्शन में पैरामीटर पास करने और फ़ंक्शन वापस करने का यह तरीका है

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

setInterval(plusDivs(1), 1000);
0
Abdul Ahad 2 अप्रैल 2018, 21:36