Fatal编程技术网

Javascript 如何-引用幻灯片

javascript html jquery css

Javascript 如何-引用幻灯片,javascript,html,jquery,css,Javascript,Html,Jquery,Css,不知道是否有人能帮我，我对Javascript比较陌生。我试图使用下面的链接使用QUOTES幻灯片代码，但是，我似乎无法解决问题，Javascript显示了以下错误： 已定义错误“plusSlides”，但从未使用过。{没有未使用的变量} 已定义错误“currentSlides”，但从未使用。{没有未使用的变量} 出于某种原因，当您将所有代码复制并粘贴到html文档时，它似乎可以工作，但当我尝试将代码分离到它们各自的位置时，显示上述错误时，它似乎无法工作 代码如下所示，如果有人能帮助我/甚

不知道是否有人能帮我，我对Javascript比较陌生。我试图使用下面的链接使用QUOTES幻灯片代码，但是，我似乎无法解决问题，Javascript显示了以下错误：

  • 已定义错误“plusSlides”，但从未使用过。{没有未使用的变量}
  • 已定义错误“currentSlides”，但从未使用。{没有未使用的变量}
出于某种原因，当您将所有代码复制并粘贴到html文档时，它似乎可以工作，但当我尝试将代码分离到它们各自的位置时，显示上述错误时，它似乎无法工作

代码如下所示，如果有人能帮助我/甚至为我指出更好代码的正确方向，我将不胜感激。理想情况下，我不介意每个幻灯片有3个div标签（包括3个引号），因为这个代码每个幻灯片只给我一个引号

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i
@charset“utf-8”；
/*CSS文档*/
*{框大小：边框框}
正文{字体系列：Verdana，无衬线；边距：0}
/*幻灯片容器*/
.slideshow容器{
位置：相对位置；
背景：#f1f1；
}
/*幻灯片*/
迈斯利德斯先生{
显示：无；
填充：80px；
文本对齐：居中；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-30px；
填充：16px；
颜色：#888；
字体大小：粗体；
字体大小：20px；
边界半径：0 3px 3px 0；
用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
位置：绝对位置；
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
颜色：白色；
}
/*点/子弹/指示器容器*/
.dot容器{
文本对齐：居中；
填充：20px；
背景：ddd；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
/*向活动点/圆添加背景色*/
.active，.dot:悬停{
背景色：#717171；
}
/*将斜体字体样式添加到所有引号中*/
q{字体样式：斜体；}
/*为作者添加蓝色*/
.作者{颜色：矢车菊蓝；}

我更爱你，因为我相信你喜欢我是为了我自己，而不是别的

-约翰·济慈

但人不是注定要失败的。一个人可以被毁灭，但不能被打败。

-欧内斯特·海明威

我没有失败。我刚刚找到了一万种行不通的方法。

-托马斯·A·爱迪生

❮
❯
您可以进行这些更改以获得正确的结果 您还没有为slideshow容器指定宽度和高度，我还看到slideshow函数在完全加载Dom之前无法正常工作，所以我对主体应用了load（），这就是代码无法正常工作的原因 HTML和css


/
* {
保证金：0；
填充：0；
}
身体{
字体系列：Verdana，无衬线；
保证金：0
}
/*幻灯片容器*/
.slideshow容器{
位置：相对位置；
宽度：100%；
高度：300px；
背景：#f1f1；
}
/*幻灯片*/
迈斯利德斯先生{
显示：无；
填充：80px；
文本对齐：居中；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-30px；
填充：16px；
颜色：#888；
字体大小：粗体；
字体大小：20px；
边界半径：0 3px 3px 0；
用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
位置：绝对位置；
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
颜色：白色；
}
/*点/子弹/指示器容器*/
.dot容器{
文本对齐：居中；
填充：20px；
背景：ddd；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
/*向活动点/圆添加背景色*/
.active，.dot:悬停{
背景色：#717171；
}
/*将斜体字体样式添加到所有引号中*/
q{
字体：斜体；
}
/*为作者添加蓝色*/
.作者{
颜色：矢车菊蓝；
}
我更爱你，因为我相信你喜欢我是为了我自己，而不是别的


-约翰·济慈


但人不是注定要失败的。一个人可以被毁灭，但不能被打败。


-欧内斯特·海明威


我没有失败。我刚刚找到了一万种行不通的方法。


-爱迪生


❮
❯

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css" media="all">
    /

    * {
      margin: 0;
      padding: 0;
    }
    body {
      font-family: Verdana, sans-serif;
      margin: 0
    }

    /* Slideshow container */
    .slideshow-container {
      position: relative;
      width: 100%;
      height: 300px;
      background: #f1f1f1f1;
    }

    /* Slides */
    .mySlides {
      display: none;
      
      padding: 80px;
      text-align: center;
    }

    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -30px;
      padding: 16px;
      color: #888;
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      position: absolute;
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
      color: white;
    }

    /* The dot/bullet/indicator container */
    .dot-container {
      text-align: center;
      padding: 20px;
      background: #ddd;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    /* Add a background color to the active dot/circle */
    .active, .dot:hover {
      background-color: #717171;
    }

    /* Add an italic font style to all quotes */
    q {
      font-style: italic;
    }

    /* Add a blue color to the author */
    .author {
      color: cornflowerblue;
    }
  </style>
  <script type="text/javascript" src="Prb4.js"></script>
</head>
<body onload="Load()">

  <div class="slideshow-container">

    <div class="mySlides">
      <q>I love you the more in that I believe you had liked me for my own sake and for nothing else</q>
      <p class="author">
        - John Keats
      </p>
    </div>

    <div class="mySlides">
      <q>But man is not made for defeat. A man can be destroyed but not defeated.</q>
      <p class="author">
        - Ernest Hemingway
      </p>
    </div>

    <div class="mySlides">
      <q>I have not failed. I've just found 10,000 ways that won't work.</q>
      <p class="author">
        - Thomas A. Edison
      </p>
    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

  </div>

  <div class="dot-container">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</body>
</html>



var slideIndex = 1;
function Load(){
showSlides(slideIndex);
}
function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  let slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  console.log(slides[slideIndex-1])
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}