图片 slider 在 javascript/HTML 中不起作用
[英]Image slider not working in javascript/HTML
问题描述
Hi trying to add an image slider in the view of my small web app but it's not working as expected.
您好尝试在我的小型 web 应用程序的视图中添加图像 slider，但它没有按预期工作。
I mean it's showing the image in a frame but when I try to click back/next button, it doesn't do anything.我的意思是它在框架中显示图像，但是当我尝试单击后退/下一步按钮时，它什么也没做。
Can you please help me out?你能帮帮我吗？
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
You've got some syntax errors.你有一些语法错误。 You forgot a couple of semicolons, so fix that up, and the rest of the code looks fine.您忘记了几个分号，所以修复它，代码的 rest 看起来不错。
I've also fixed up some of the Javascript code.我还修复了一些 Javascript 代码。
Hope this helps!希望这可以帮助！
Basically the problem, was that you were never increasing or decreasing slideIndex .基本上问题在于，您从未增加或减少slideIndex 。 You would only increase if it was less than 0 or greater than .length .只有小于 0 或大于.length时，您才会增加。 So what I did, was instead of calling n as an argument, I just used slideIndex within the showDivs() function.所以我所做的不是调用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.