幻灯片无效

时间:2016-11-08 23:35:10

标签: javascript jquery html slideshow

(对不起,如果这个问题有简单的答案!!)。无论如何,我试图在一页上制作两个幻灯片。只有一个人表现出来。虽然我已经为第二个添加了所有代码,但只有第一个代码在页面上可见。

我只允许保持代码基本,但如果问题是什么,可以使用javascript做任何事情。

javascript。我不确定它的意思(再次抱歉),但它适用于一个横幅

<!-- script for slideshow ((copied from http://www.w3schools.com/w3css/w3css_slideshow.asp!)) -->
<script>
var myIndex = 0;
carousel();



function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 1000);    <!-- time between slide change -->

    }
</script> 

html代码 - 对于第二张幻灯片,我在这两个幻灯片&#39;之间复制了代码。注意到不同的div(并更改图片文件名)

    <!--slideshow-->
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
    <!--END slideshow-->

这是css(只是相关的容器 规格)。

/* Slideshow container */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
}

.mySlides {
    position: relative;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 500px;
    margin: auto;
    border-radius: 25px;
}

提前谢谢!!

2 个答案:

答案 0 :(得分:0)

如果你复制了具有相同元素的div,并且单独留下了类名,那么只有一个幻灯片显示才有意义 - 但它应该是播放两组图像的幻灯片(或者重复,如果这些是相同)。这是一个简单的修复方法。首先,为第二组图像重命名该类,因此您的HTML将类似于:

<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>

<div class="slideshow-container">
<img class="mySlides2" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides2" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides2" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides2" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides2" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides2" src="images/2img6.jpg" alt="2img6.jpg">
</div>

然后,您基本上可以将一个幻灯片显示所需的代码加倍,并将其设置为使用第二组图像的类。可能难以想象你的脑袋,但你可以在这里看到它:

var xIndex = 0, yIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var y = document.getElementsByClassName("mySlides2");

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }

  for (i = 0; i < y.length; i++) {
    y[i].style.display = "none";  
  }

  xIndex++;
  if (xIndex > x.length) {xIndex = 1}    
  x[xIndex-1].style.display = "block";  

  yIndex++;
  if(yIndex > y.length) {yIndex = 1}
  y[yIndex-1].style.display = "block";

  setTimeout(carousel, 1000);
}

您可以看到我创建了一个yIndex变量,并将y用于.mySlides2元素(而不是mySlides)。我专门为y而不是x加倍了循环,并以与xIndex相同的方式递增yIndex(如果它超过最大图像数,则将其设置为1,并设置要显示的下一个图像)。

这是一个有效的小提琴(好吧,从某种意义上来说,图像都破了,但剧本有效):https://jsfiddle.net/cchvncnd/

答案 1 :(得分:0)

来自@ mark.hch的精彩回答。 但是,如果你想坚持当前的类。并让函数自动迭代它,您可以使用此代码,请查看它

var myIndex = [];
carousel();

function carousel() {
  var i, j;
  var con = document.getElementsByClassName("slideshow-container");
  for (j = 0; j < con.length; j++) {
    myIndex[j] = myIndex[j] || 0;
    for (i = 0; i < con[j].children.length; i++) {
      con[j].children[i].style.display = "none";
    }
    if (myIndex[j] >= con[j].children.length) {
      myIndex[j] = 0;
    }    
    con[j].children[myIndex[j]].style.display = "block";
    myIndex[j] ++;
  }
  setTimeout(carousel, 1000); <!-- time between slide change -->    
}
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  display: inline-block;
  height: 200px;
  width: 500px;
  border: 1px solid green;
}
.mySlides {
  position: relative;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 25px;
}
<div class="slideshow-container">
  <img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
  <img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
  <img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
  <img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
  <img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
  <img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<div class="slideshow-container">
  <img class="mySlides" src="images/1img1.jpg" alt="1img1.jpg">
  <img class="mySlides" src="images/1img2.jpg" alt="1img2.jpg">
  <img class="mySlides" src="images/1img3.jpg" alt="1img3.jpg">
  <img class="mySlides" src="images/1img4.jpg" alt="1img4.jpg">
  <img class="mySlides" src="images/1img5.jpg" alt="1img5.jpg">
  <img class="mySlides" src="images/1img6.jpg" alt="1img6.jpg">
</div>