javascript - 响应标签打开不同的幻灯片，如何？

标签 javascript jquery html css

我正在使用 W3.css 事件/当前标签并希望使用它以便在按下每个选项卡时开始不同的幻灯片放映(为此我还使用了 w3.css 幻灯片放映教程，使用图像作为指示器并包括上一个/下一个)。我遇到的问题是如何让每个选项卡打开我创建的不同幻灯片。我已经尝试了多种组合它们的方法，但只能得到一个选项卡来显示幻灯片，之后的任何选项卡都无法正常工作。

代码和下面基本一样

对于标签 https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active

和幻灯片放映

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_imgdots

如何将两者结合起来？有可能吗？

这是我到目前为止尝试过的一些方法，我还尝试在所有其他选项卡下添加幻灯片放映，就像在另一个选项卡中一样。 

   

function openPics(evt, picsName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("pics");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(picsName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}

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-opacity-off", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-opacity-off";
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<div class="w3-container">
  <h1>KAUSI 2017</h1>

  <div class="w3-bar w3-black">
    <button class="w3-bar-item w3-button tablink w3-red" onclick="openPics(event,'nivala')">nivala</button>
    <button class="w3-bar-item w3-button tablink" onclick="openPics(event,'oulu')">oulu</button>
    <button class="w3-bar-item w3-button tablink" onclick="openPics(event,'sotkamo')">sotkamo</button>
    <button class="w3-bar-item w3-button tablink" onclick="openPics(event,'practice')">practice</button>
  </div>

  <div id="nivala" class="w3-container w3-border pics w3-animate-zoom ">
    <h3>Nivala</h3>
  </div>

  <div id="oulu" class="w3-container w3-border pics w3-animate-zoom" style="display:none">
    <h3>oulu </h3>
    <div class="w3-container">
      <h1 align="center">Veteli - Nivala </h1>
      <p align="center"> Vetelissä Ruohopatilla 20.6</p>
    </div>

    <div class="w3-center">

      <div class="w3-content" style="max-width:1200px">
        <img class="mySlides" src="../vepeimages/nivala20_6/nivala2.jpg" style="width:75%">
        <img class="mySlides" src="../vepeimages/nivala20_6/nivala3.jpg" style="width:75%">
        <img class="mySlides" src="../vepeimages/nivala20_6/nivala4.jpg" style="width:75%">
        <img class="mySlides" src="../vepeimages/nivala20_6/nivala5.jpg" style="width:75%">

        <div class="w3-section">
          <button class="w3-btn w3-white w3-border w3-border-red w3-round-large" onclick="plusDivs(-1)">❮ Prev</button>
          <button class="w3-btn w3-white w3-border w3-border-red w3-round-large" onclick="plusDivs(1)">Next ❯</button>

          <div class="w3-row-padding w3-section">
            <div class="w3-col s1 w3-section ">
              <img class="demo w3-opacity w3-hover-opacity-off" src="../vepeimages/nivala20_6/nivala2.jpg" style="width:75%" onclick="currentDiv(1)">
            </div>
            <div class="w3-col s1 w3-section">
              <img class="demo w3-opacity w3-hover-opacity-off" src="../vepeimages/nivala20_6/nivala3.jpg" style="width:75%" onclick="currentDiv(2)">
            </div>
            <div class="w3-col s1 w3-section">
              <img class="demo w3-opacity w3-hover-opacity-off" src="../vepeimages/nivala20_6/nivala4.jpg" style="width:75%" onclick="currentDiv(3)">
            </div>
            <div class="w3-col s1 w3-section ">
              <img class="demo w3-opacity w3-hover-opacity-off" src="../vepeimages/nivala20_6/nivala5.jpg" style="width:75%" onclick="currentDiv(4)">
            </div>
          </div>
        </div>

        <div id="sotkamo" class="w3-container w3-border pics w3-animate-zoom" style="display:none" <h3>sotkamo </h3>
        </div>

        <div id="practice" class="w3-container w3-border pics w3-animate-zoom" style="display:none">
          <h3>practice </h3>
        </div>
      </div>

最佳答案

您的第一个问题，“sotkamo 和 practice 标签没有显示”，它与您的结束标签有关。解决方案是确保 #sotkamo和 #practice与#nivala同级和 #oulu .在您的情况下，您缺少几个关闭 </div>这让浏览器解释你的 #sotkamo和 #practice在你的里面#oulu .

关于您的第二个问题，或者据我了解，您希望在不同的选项卡中放映幻灯片。这当然是可能的。但是，您需要调整显示幻灯片的功能。您应该考虑哪个选项卡处于事件状态，然后找到所有 .slides在那个 parent 之下。您可以使用父级的 id 作为参数，然后将其传递给函数:

查看此示例函数:

function showDivs(parent, n) {
  var i,
    parentDiv = document.getElementById(parent);
  var x = parentDiv.getElementsByClassName("mySlides");
  var dots = parentDiv.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndices[parent] = 1
  }
  if (n < 1) {
    slideIndices[parent] = 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-opacity-off", "");
  }
  x[slideIndices[parent] - 1].style.display = "block";
  dots[slideIndices[parent] - 1].className += " w3-opacity-off";
}

请随意浏览此示例片段以供引用:

function openPics(evt, picsName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("pics");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  var block = document.getElementById(picsName);
  block.style.display = "block";
  evt.currentTarget.className += " w3-red";
}

//default active slide is 1. update on slide change to preserve state
var slideIndices = {
  oulu: 1,
  sotkamo: 1
};
for (var key in slideIndices) {
  if (slideIndices.hasOwnProperty(key)) {
    showDivs(key, 1);
  }
}

function plusDivs(parent, n) {
  showDivs(parent, slideIndices[parent] += n);
}

function currentDiv(parent, n) {
  showDivs(parent, slideIndices[parent] = n);
}

function showDivs(parent, n) {
  var i,
    parentDiv = document.getElementById(parent);
  var x = parentDiv.getElementsByClassName("mySlides");
  var dots = parentDiv.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndices[parent] = 1
  }
  if (n < 1) {
    slideIndices[parent] = 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-opacity-off", "");
  }
  x[slideIndices[parent] - 1].style.display = "block";
  dots[slideIndices[parent] - 1].className += " w3-opacity-off";
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-container">
  <h1>KAUSI 2017</h1>
  <div class="w3-bar w3-black">
    <button class="w3-bar-item w3-button tablink w3-red" onclick="openPics
(event,'nivala')">nivala</button>
    <button class="w3-bar-item w3-button tablink" onclick="openPics(event,'oulu')">oulu</button>
    <button class="w3-bar-item w3-button tablink" onclick="openPics
(event,'sotkamo')">sotkamo</button>
    <button class="w3-bar-item w3-button tablink" onclick="openPics
(event,'practice')">practice</button>
  </div>

  <div id="nivala" class="w3-container w3-border pics w3-animate-zoom ">
    <h3>Nivala</h3>
  </div>

  <div id="oulu" class="w3-container w3-border pics w3-animate-zoom" style="display:none;">
    <h3>oulu </h3>
    <div class="w3-container">
      <h1 align="center">Veteli - Nivala </h1>
      <p align="center"> Vetelissä Ruohopatilla 20.6</p>
    </div>
    <div class="w3-center">
      <div class="w3-content" style="max-width:1200px">
        <img class="mySlides" src="http://via.placeholder.com/450x150/ccc/fff" style="width:75%">
        <img class="mySlides" src="http://via.placeholder.com/450x150/f5f/fff" style="width:75%">
        <img class="mySlides" src="http://via.placeholder.com/450x150/4e56fe/fff" style="width:75%">
        <img class="mySlides" src="http://via.placeholder.com/450x150/565f4e/fff" style="width:75%">
        <div class="w3-section">
          <button class="w3-btn w3-white w3-border w3-border-red w3-round-large" onclick="plusDivs('oulu',-1)">❮ Prev</button>
          <button class="w3-btn w3-white w3-border w3-border-red w3-round-large" onclick="plusDivs('oulu',1)">Next ❯</button>
          <div class="w3-row-padding w3-section">
            <div class="w3-col s1 w3-section ">
              <img class="demo w3-opacity w3-hover-opacity-off" src="http://via.placeholder.com/450x150/ccc/fff" style="width:75%" onclick="currentDiv('oulu',1)">
            </div>
            <div class="w3-col s1 w3-section">
              <img class="demo w3-opacity w3-hover-opacity-off" src="http://via.placeholder.com/450x150/f5f/fff" style="width:75%" onclick="currentDiv('oulu',2)">
            </div>
            <div class="w3-col s1 w3-section">
              <img class="demo w3-opacity w3-hover-opacity-off" src="http://via.placeholder.com/450x150/4e56fe/fff" style="width:75%" onclick="currentDiv('oulu',3)">
            </div>
            <div class="w3-col s1 w3-section ">
              <img class="demo w3-opacity w3-hover-opacity-off" src="http://via.placeholder.com/450x150/565f4e/fff" style="width:75%" onclick="currentDiv('oulu',4)">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="sotkamo" class="w3-container w3-border pics w3-animate-zoom" style="display:none">
    <h3>sotkamo </h3>
    <div class="w3-container">
      <h1 align="center">Veteli - Nivala </h1>
      <p align="center"> Vetelissä Ruohopatilla 20.6</p>
    </div>
    <div class="w3-center">
      <div class="w3-content" style="max-width:1200px">
        <img class="mySlides" src="http://via.placeholder.com/450x150/ccc/fff" style="width:75%">
        <img class="mySlides" src="http://via.placeholder.com/450x150/f5f/fff" style="width:75%">
        <img class="mySlides" src="http://via.placeholder.com/450x150/4e56fe/fff" style="width:75%">
        <img class="mySlides" src="http://via.placeholder.com/450x150/565f4e/fff" style="width:75%">
        <div class="w3-section">
          <button class="w3-btn w3-white w3-border w3-border-red w3-round-large" onclick="plusDivs('sotkamo',-1)">❮ Prev</button>
          <button class="w3-btn w3-white w3-border w3-border-red w3-round-large" onclick="plusDivs('sotkamo',1)">Next ❯</button>
          <div class="w3-row-padding w3-section">
            <div class="w3-col s1 w3-section ">
              <img class="demo w3-opacity w3-hover-opacity-off" src="http://via.placeholder.com/450x150/ccc/fff" style="width:75%" onclick="currentDiv('sotkamo',1)">
            </div>
            <div class="w3-col s1 w3-section">
              <img class="demo w3-opacity w3-hover-opacity-off" src="http://via.placeholder.com/450x150/f5f/fff" style="width:75%" onclick="currentDiv('sotkamo',2)">
            </div>
            <div class="w3-col s1 w3-section">
              <img class="demo w3-opacity w3-hover-opacity-off" src="http://via.placeholder.com/450x150/4e56fe/fff" style="width:75%" onclick="currentDiv('sotkamo',3)">
            </div>
            <div class="w3-col s1 w3-section ">
              <img class="demo w3-opacity w3-hover-opacity-off" src="http://via.placeholder.com/450x150/565f4e/fff" style="width:75%" onclick="currentDiv('sotkamo',4)">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="practice" class="w3-container w3-border pics w3-animate-zoom" style="display:none">
    <h3>practice </h3>
  </div>

</div>

关于javascript - 响应标签打开不同的幻灯片，如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46520603/

上一篇：html - 在多列布局上绝对定位的工具提示

下一篇：javascript - 内部 js 工作正常，但外部没有

相关文章：

javascript - Highcharts Heatmap colorAxis 停止渐变

javascript - TypeScript:错误 TS2339:类型 'CustomEvent' 上不存在属性 'Window'

javascript - Controller 内的 Angular $http 函数作用域

javascript - 可以向 HTML5 文档类型添加额外数据

jquery - 使用 jQuery 删除 HTML 标签

javascript - 如何将编辑按钮更改为保存按钮并添加取消按钮？

html - 即使在隐藏侧边栏时，也使 div 子元素占据 div 父元素的 100%

javascript - Fontawesome 图标文本出现而不是图标

javascript - CSS 移除 float 元素上方的白色间隙

javascript - jQuery 根据下拉列表中的选择将行移动到另一个表

©2024 IT工具网  联系我们