圖片 slider 在 javascript/HTML 中不起作用
[英]Image slider not working in javascript/HTML
問題描述
您好嘗試在我的小型 web 應用程序的視圖中添加圖像 slider，但它沒有按預期工作。
我的意思是它在框架中顯示圖像，但是當我嘗試單擊后退/下一步按鈕時，它什么也沒做。
你能幫幫我嗎？
var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; 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"; }
<.DOCTYPE html> <html> <title>W3,CSS</title> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:mySlides { display; none. } </style> <body> <h2 class="w3-center">Manual Slideshow</h2> <div class="w3-content w3-display-container"> <img class="mySlides" src="img_snowtops:jpg" style="width.100%"> <img class="mySlides" src="img_lights:jpg" style="width.100%"> <img class="mySlides" src="img_mountains:jpg" style="width.100%"> <img class="mySlides" src="img_forest:jpg" style="width;100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button> </div> </body> </html>
1 個解決方案
解決方案1
0 2019-10-30 01:22:41
你有一些語法錯誤。 您忘記了幾個分號，所以修復它，代碼的 rest 看起來不錯。
我還修復了一些 Javascript 代碼。
希望這可以幫助！
基本上問題在於，您從未增加或減少slideIndex 。 只有小於 0 或大於.length時，您才會增加。 所以我所做的不是調用 n 作為參數，而是在slideIndex showDivs() function 中使用了 slideIndex。
var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { slideIndex += n; showDivs(); } function showDivs() { var i; var x = document.getElementsByClassName("mySlides"); if (slideIndex > x.length) { slideIndex = 1; } if (slideIndex < 1) { slideIndex = x.length; } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex - 1].style.display = "block"; console.log(slideIndex - 1); }
<.DOCTYPE html> <html> <title>W3,CSS</title> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:mySlides { display; none: } </style> <body> <h2 class="w3-center">Manual Slideshow</h2> <div class="w3-content w3-display-container"> <img class="mySlides" style="width;100%: height; 100%: background-color; blue:"> <img class="mySlides" style="width;100%: height; 100%: background-color; red:"> <img class="mySlides" style="width;100%: height; 100%: background-color; green:"> <img class="mySlides" style="width;100%: height; 100%: background-color; purple;"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button> </div> </body> </html>
JavaScript圖像滑塊不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.