如何使一個javascript滑塊滑動自動

我發現這個滑塊的CSS/JavaScript的，一切工作正常，但我怎樣才能使幻燈片自動滑動而不是隻在用戶按下箭頭時才滑動？

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-white", ""); 
 
    } 
 
    x[slideIndex - 1].style.display = "block"; 
 
    dots[slideIndex - 1].className += " w3-white"; 
 
    setTimeout(2000); // Change image every 2 seconds 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<style> 
 
    .mySlides { 
 
    display: none 
 
    } 
 
    .w3-left, 
 
    .w3-right, 
 
    .w3-badge { 
 
    cursor: pointer 
 
    } 
 
    .w3-badge { 
 
    height: 13px; 
 
    width: 13px; 
 
    padding: 0 
 
    } 
 
</style> 
 

 
<body> 
 

 
    <div class="w3-container"> 
 
    <h2>Slideshow Indicators</h2> 
 
    <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p> 
 
    </div> 
 

 
    <div class="w3-content w3-display-container" style="max-width:800px"> 
 
    <img class="mySlides" src="img_nature_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%"> 
 
    <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%"> 
 
    <div class="w3-center w3-section w3-large w3-text-white w3-display-bottomleft" style="width:100%"> 
 
     <div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div> 
 
     <div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div> 
 
     <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> 
 
     <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> 
 
     <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> 
 
    </div> 
 
    </div> 
 

 
    <script> 
 
    </script> 
 

 
</body> 
 

 
</html>

來源

2016-10-20 Moksud Ahmed

有看看'setTimeout'或'setInterval' – Pete

這不是你如何使用'setTimeout （2000）;'。您需要傳遞一個函數調用 –

在你的情況的setInterval（）應該是全球性的。

setInterval(function(){ 
    slideIndex = slideIndex +1; 
    showDivs(slideIndex) 
}, 2000);

https://jsfiddle.net/g9a2ez4s/

來源

2016-10-20 13:04:48 Rishabh

使用的setInterval

setInterval(function(){ 
document.getElementsByClassName("w3-left").click(); 
}, 800);

來源

2016-10-20 13:04:04 paranjothi

嗨在這裏，我只是執行頻繁滑動圖像邏輯..

試試這個

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<style> 
.mySlides {display:none} 
.w3-left, .w3-right, .w3-badge {cursor:pointer} 
.w3-badge {height:13px;width:13px;padding:0} 
</style> 
<body> 

<div class="w3-container"> 
    <h2>Slideshow Indicators</h2> 
    <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p> 
</div> 

<div class="w3-content w3-display-container" style="max-width:800px"> 
    <img class="mySlides" alt="sample test1" src="mfdg2.jpg" style="width:100%"> 
    <img class="mySlides" alt="sample test2" src="img2.jpg" style="width:100%"> 
    <img class="mySlides" alt="sample test3" src="img1.jpg" style="width:100%"> 
</div> 

<script> 
showDivs(1); 

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

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    if (n > x.length) {n = 1} 

    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 

    x[n-1].style.display = "block"; 
setTimeout(function() { //calls click event after a certain time 
    plusDivs(n); 
}, 2000); 

} 

</script> 

</body> 
</html>

它的工作對我來說..

來源

2016-10-20 13:21:10

它不適合我，我嘗試了您的代碼，但圖像不會自動更改... –

如何使一個javascript滑塊滑動自動

回答

相關問題