autoslide javascript slider 无法正常工作
[英]autoslide javascript slider not working properly
问题描述
I've made a slider using Javascript & HTML but I have a problem with it.
我已经使用 Javascript 和 HTML 制作了一个 slider，但我遇到了问题。 The autoslide is working but the dots aren't changing it stays stuck on the first one and the other problem is that when we click on one of the arrow, the slider speeds up. autoslide 正在工作，但点没有改变，它停留在第一个上，另一个问题是当我们单击其中一个箭头时，slider 会加速。 Any ideas of what could be wrong here?关于这里可能出什么问题的任何想法？
here's my code:这是我的代码：
var slideIndex = 1; showImage(slideIndex); function plusIndex(n) { showImage(slideIndex += n); } function currentSlide(n){ showImage(slideIndex = n); } function showImage(n) { var slide = document.getElementsByClassName("slides"); var dots = document.getElementsByClassName("dots"); if (n > slide.length) {slideIndex = 1}; if (n < 1) {slideIndex = slide.length}; for (var i = 0; i < slide.length; i++) { slide[i].style.display = "none"; }; slide[slideIndex-1].style.display = "block"; for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); }; dots[slideIndex-1].className += " active"; autoslide(); function autoslide(){ var i; var slide= document.getElementsByClassName("slides") for (var i=0; i<slide.length;i++) { slide[i].style.display= "none"; } if (slideIndex> slide.length) {slideIndex=1} slide[slideIndex-1].style.display = "block"; slideIndex++; setTimeout(autoslide,2000); } } body { margin: 0; font-family: verdana,sans-serif; } h1 { text-align: center; }.slideshow-container { width: 800px; position: relative; margin: auto; }.slides { display: none; } img { width: 100%; }.number { position: absolute; padding: 8px 12px; color: #f2f2f2; }.text { text-align: center; font size: 15px; position: absolute; width: 100%; padding: 8px 12px; bottom: 20px; color: #f2f2f2; font-weight: bold; }.prev, .next { position: absolute; top: 50%; color: #f2f2f2; font-weight: bold; padding: 10px 10px; font-size: 18px; border-radius: 0 3px 3px 0; cursor: pointer; }.next { border-radius: 3px 0 0 3px; right: 0; }.prev:hover, .next:hover { background: rgba(0, 0, 0, 0.8); }.dots { width: 10px; height: 10px; display: inline-block; background: gray; padding: 5px; border-radius: 50%; cursor: pointer; }.fade { animation-name: fade; animation-duration: 0.5s; } @keyframes fade { from{opacity: 0.4} to{opacity: 1;} }.active, .dots:hover { background: #333; }
<.DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Slidder Show</title> <script type="text/javascript"></script> <link rel="stylesheet" href="style:css"/> <h1>Les 7 merveilles du Monde</h1> </head> <body> <.--Container Slide Show--> <div class="slideshow-container"> <div class="slides fade"> <div class="number">1 / 7</div> <div><img src="https.//www.wallpapertip:com/wmimgs/44-447835_delhi-ke-wallpaper-38-group-wallpapers-taj-mahal.jpg"></div> <div class="text">Le Taj Mahal</div> </div> <div class="slides fade"> <div class="number">2 / 7</div> <div><img src="https.//wallpapercave;com/wp/wp1885729;jpg"></div> <div class="text">Le Chichen Itza</div> </div> <a class="prev" onclick="plusIndex(-1)">❮:</a> <a class="next" onclick="plusIndex(+1)">❯</a> </div> <br/> <div style="text-align: center;"> <span class="dots" onclick="currentSlide(1)"></span> <span class="dots" onclick="currentSlide(2)"></span> </div> </body> </html>
Thanks for your help in advance!提前感谢您的帮助！
....................................... ....................................... ..................................................... ..................................
1 个解决方案
解决方案1
0 2022-02-17 13:35:49
You forgot to import your js script to Html, I had tried it on my own and it's working!你忘了导入你的js脚本到Html，我自己试过了，可以用！
Just put it before body closing tag like this:只需将它放在 body 结束标记之前，如下所示：
<script type="text/javascript" src="./scriptJs.js"></script>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.