在一个网页上幻灯片显示不同的幻灯片组

时间:2016-06-26 15:57:50

标签: javascript html css

我有一个有多个弹出窗口的网站,我想在每个弹出窗口中放置幻灯片。当我添加第二张幻灯片时,第一张幻灯片显示的幻灯片出现在第二张幻灯片中。

我使用<h1 ng-bind="hello-model"></h1> 指定幻灯片的图片,但我不明白如何为每个幻灯片分隔特定幻灯片或调整功能以处理每个幻灯片的多个类名。

我的代码如下。

.getElementsByClassName

1 个答案:

答案 0 :(得分:0)

尝试在所有函数plusSlides(),currentSlide()和showSlides()中传递另一个参数,用于不同弹出窗口的幻灯片,如

function plusSlides(slide, n) {
   showSlides(slideIndex += n);
}

function currentSlide( slide, n) {
   showSlides(slideIndex = n);
}
function showSlides( slide, n){
  var slides = document.getElementsByClassName("slide");
}

并调用函数,并更改类名

<a class="next" onclick="plusSlides(myslide1,1)">&#10095;</a>
<span class="dot" onclick="currentSlide( myslide1,3)"></span> 

<a class="next" onclick="plusSlides(myslide2,1)">&#10095;</a>
<span class="dot" onclick="currentSlide( myslide2,3)"></span> 

因为你的函数正在调用所有具有mySlides的元素