Javascript 幻灯片放映无法正常工作_Javascript_Html_Css

Javascript 幻灯片放映无法正常工作

javascript html css

Javascript 幻灯片放映无法正常工作,javascript,html,css,Javascript,Html,Css,我正在努力学习如何在我的网站上实现幻灯片放映。我现在只想在W3学校买一个：但是当我使用他们的任何教程时，我最终会看到图片下方的按钮和到处都是bug。我将他们的全部代码复制粘贴到我的编辑器中，得到了相同的结果，所以没有误解。我还没有找到任何其他教程来解释我想要什么，如果有人能帮我完成他们的代码，我将不胜感激这是： <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewpor

我正在努力学习如何在我的网站上实现幻灯片放映。我现在只想在W3学校买一个：但是当我使用他们的任何教程时，我最终会看到图片下方的按钮和到处都是bug。我将他们的全部代码复制粘贴到我的编辑器中，得到了相同的结果，所以没有误解。我还没有找到任何其他教程来解释我想要什么，如果有人能帮我完成他们的代码，我将不胜感激

这是：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/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-bottommiddle" 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>
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";
}
</script>

</body>
</html>


W3.CSS
.mySlides{display:none}
.w3左、.w3右、.w3徽章{光标：指针}
.w3徽章{高度：13px；宽度：13px；填充：0}
幻灯片指示器
使用按钮指示幻灯片中有多少幻灯片以及用户当前正在查看的幻灯片的示例
❮
❯
var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数currentDiv（n）{
showDivs（slideIndex=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i

在

/lib/w3.css中有什么？浏览器控制台中是否有任何错误？请尝试从w3编辑器中删除/lib/w3.css
，我相信您将看到图像下方的按钮。您只需要从该文件中复制内容。/lib/w3.css
中有什么内容？浏览器控制台中是否有任何错误？请尝试从w3编辑器中删除/lib/w3.css
，我相信您将看到图像下方的按钮。您只需要从该文件复制内容。