在一个页面上播放多个幻灯片会使第一个幻灯片无法使用

首先，我知道这个问题是在答案不能解决我的问题之前提出的，所以我想再问一次：我使用了"W3school"的幻灯片代码，它提供了一个很好的Jquery动画幻灯片。不幸的是，我的页面上需要不止一个，第二个会阻止第一个工作。甚至在这里找到这个解决方案之前，我就尝试更改不同幻灯片对象的CSS和HTML名称，这成功地解决了部分问题(第二个没有显示)，但正如前面提到的，阻止了第一个幻灯片的工作。幻灯片在这里，但点击箭头不会有任何作用。我稍微明白问题出在哪里，但无法解决。以下是我如何修改第二个代码：

var slideIndex = 7;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("dot2");
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(" active2", "");
}
slides[slideIndex-1].style.display = "block";  
dots[slideIndex-1].className += " active2";
}

正如您所看到的，我刚刚为Jquery和CSS中的每种类型的对象添加了"2"。我想我必须给相乘的命令起不同的名字，但怎么做呢？

编辑：https://jsfiddle.net/mgb7k239/这是Jsfidle中的一个例子，但我不明白为什么第一个甚至不是幻灯片，第二个也不起作用：/但它在我的电脑上起作用！我忘了在我的电脑上说，点击第一个幻灯片上的箭头会改变第二个幻灯片的图片！我把这些照片换成了网上随便找的。

他们代码中的主要问题是它是制作的，嗯。。。对于一个幻灯片，当你试图将其应用于多个幻灯片时，会出现一些严重的问题，正如你所经历的那样。他们使用了全局变量(index，n)，当你有一个幻灯片时这不是问题，但有更多的幻灯片-很难处理这些东西，而且很难用现有的概念获得对当前幻灯片div的引用。

是的，这是一个简单的javascript幻灯片，这里没有jQuery。我稍微更改了您的HTML和CSS(dots-div是幻灯片放映的内部div，只是为了更容易定位)，还删除了内联事件处理程序，只是为了让事情变得更简单、更干净。

这可以通过多种方式解决，我选择了这个：

(function() {
init(); //on page load - show first slide, hidethe rest
function init() {
parents = document.getElementsByClassName('slideshow-container');
for (j = 0; j < parents.length; j++) {
var slides = parents[j].getElementsByClassName("mySlides");
var dots = parents[j].getElementsByClassName("dot");
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
dots = document.getElementsByClassName('dot'); //dots functionality
for (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
slides = this.parentNode.parentNode.getElementsByClassName("mySlides");
for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove('active');
slides[j].classList.remove('active-slide');
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.classList.add('active');
slides[index].classList.add('active-slide');
}
}
//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
current = this.parentNode;
var slides = current.getElementsByClassName("mySlides");
var dots = current.getElementsByClassName("dot");
curr_slide = current.getElementsByClassName('active-slide')[0];
curr_dot = current.getElementsByClassName('active')[0];
curr_slide.classList.remove('active-slide');
curr_dot.classList.remove('active');
if (this.className == 'next') {
if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
curr_slide.nextElementSibling.classList.add('active-slide');
curr_dot.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
if (this.className == 'prev') {
if (curr_slide.previousElementSibling) {
curr_slide.previousElementSibling.classList.add('active-slide');
curr_dot.previousElementSibling.classList.add('active');
} else {
slides[slides.length - 1].classList.add('active-slide');
dots[slides.length - 1].classList.add('active');
}
}
}
}
})();

/* Slideshow container */


.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
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);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom:20px;
width: 100%;
text-align: center;
}
.mySlides {
display:none;
}
.active-slide {
display:block;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>

<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/1000x350" style="width:100%">
<div class="text">Caption Four</div>
</div>
<a class="prev">&#10094;</a>
<a class="next">&#10095;</a>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot" ></span>
<span class="dot" ></span>
<span class="dot"></span>
</div>
</div>
<br>


<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" >&#10094;</a>
<a class="next">&#10095;</a>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>  
</div>
<br>

所以，如果你保持幻灯片div的当前HTML结构，并且你可以有无限数量的独立幻灯片，这应该是可行的。这是非常老式的js，应该很清楚，如果有什么不清楚的地方，我可以解释更多。。。或者试着更好地解释。：)

我在这里创建了一个解决方案：

var sliderObjects = [];
createSliderObjects();
function plusDivs(obj, n) {
var parentDiv = $(obj).parent();
var matchedDiv;
$.each(sliderObjects, function(i, item) {
if ($(parentDiv[0]).attr('id') == $(item).attr('id')) {
matchedDiv = item;
return false;
}
});
matchedDiv.slideIndex=matchedDiv.slideIndex+n;
showDivs(matchedDiv, matchedDiv.slideIndex);
}
function createSliderObjects() {
var sliderDivs = $('.slider');
$.each(sliderDivs, function(i, item) {
var obj = {};
obj.id = $(item).attr('id');
obj.divContent = item;
obj.slideIndex = 1;
obj.slideContents = $(item).find('.mySlides');
showDivs(obj, 1);
sliderObjects.push(obj);
});
}
function showDivs(divObject, n) {
debugger;
var i;
if (n > divObject.slideContents.length) {
divObject.slideIndex = 1
}
if (n < 1) {
divObject.slideIndex = divObject.slideContents.length
}
for (i = 0; i < divObject.slideContents.length; i++) {
divObject.slideContents[i].style.display = "none";
}
divObject.slideContents[divObject.slideIndex - 1].style.display = "block";
}

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content w3-display-container slider" id="div1">
<img class="mySlides" src="https://i.imgur.com/eLarayS.jpg" style="width:100%">
<img class="mySlides" src="https://i.imgur.com/xpOiMWh.jpg" style="width:100%">
<img class="mySlides" src="https://i.imgur.com/lgcC8Y5.jpg" style="width:100%">
<img class="mySlides" src="http://i.imgur.com/ufmiVTQ.jpg" style="width:100%">
<a class="w3-btn-floating w3-display-left" onclick="plusDivs(this,-1)">&#10094;</a>
<a class="w3-btn-floating w3-display-right" onclick="plusDivs(this,1)">&#10095;</a>
</div>
<div class="w3-content w3-display-container slider" id="div2">
<img class="mySlides" src="https://i.imgur.com/eLarayS.jpg" style="width:100%">
<img class="mySlides" src="https://i.imgur.com/xpOiMWh.jpg" style="width:100%">
<img class="mySlides" src="https://i.imgur.com/lgcC8Y5.jpg" style="width:100%">
<img class="mySlides" src="http://i.imgur.com/ufmiVTQ.jpg" style="width:100%">
<a class="w3-btn-floating w3-display-left" onclick="plusDivs(this, -1)">&#10094;</a>
<a class="w3-btn-floating w3-display-right" onclick="plusDivs(this, 1)">&#10095;</a>
</div>

您现在可以为具有"滑块"类和唯一id的滑块添加尽可能多的div。

这里通过数组和索引操作解决了问题

阵列的大小应该取决于幻灯片的数量

var slideIndex = new Array(2);
slideIndex[0]=1;
slideIndex[1]=1;
showSlides(1, 0);  
showSlides(1, 1);

function plusSlides(n, slideshownumber) 
{
slideIndex[slideshownumber] = slideIndex[slideshownumber] + n; 
showSlides( slideIndex[slideshownumber], slideshownumber );
}
function currentSlide(n, slideshownumber) 
{
slideIndex[slideshownumber] = n;
showSlides(slideIndex[slideshownumber], slideshownumber);
}
function showSlides(n, slideshownumber) 
{
var i;

"滑块"+幻灯片数字上的建筑名称，基于0的计数(重要)

var slideshowname = "slider" + slideshownumber;
var slides = document.getElementsByName(slideshowname);

"点"+幻灯片数字上的建筑名称，基于0的计数(重要)

var dotname = "dot" + slideshownumber;
var dots = document.getElementsByName(dotname);
if (n > slides.length) 
{
slideIndex[slideshownumber] = 1;
}
if (n < 1) 
{
slideIndex[slideshownumber] = 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", "");
}
slides[slideIndex[slideshownumber]-1].style.display = "block";
dots[slideIndex[slideshownumber]-1].className += " active";
}

幻灯片的示例，点和滑块名称应前进到滑块1、滑块2。。。

<div class="slideshow-container">
<div class="mySlides fade" name="slider0">
<div class="numbertext">1 / 2</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade" name="slider0">
<div class="numbertext">2 / 2</div>
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
</div>

plus幻灯片(-1表示背面，幻灯片0)plus幻灯片(1用于向前，幻灯片0)

<a class="prev" onclick="plusSlides(-1,0)">&#10094;</a>
<a class="next" onclick="plusSlides(1,0)">&#10095;</a>
</div>

初始化

<script> currentSlide(1,0)</script>

函数currentSlide(幻灯片编号，幻灯片编号)用于点和上一个/下一个按钮！

<div style="text-align:center">
<span class="dot" name="dot0" onclick="currentSlide(1,0)"></span>
<span class="dot" name="dot0" onclick="currentSlide(2,0)"></span>
</div>

下一个名为slider1 的滑块

<div class="slideshow-container">
<div class="mySlides fade" name="slider1">
<div class="numbertext">1 / 2</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade" name="slider1">
<div class="numbertext">2 / 2</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>

slider1的参数现在已更改

<a class="prev" onclick="plusSlides(-1,1)">&#10094;</a>
<a class="next" onclick="plusSlides(1,1)">&#10095;</a>
</div>
<script> currentSlide(1,1)</script>
<div style="text-align:center">
<span class="dot" name="dot1" onclick="currentSlide(1,1)"></span>
<span class="dot" name="dot1" onclick="currentSlide(2,1)"></span>
</div>

相关内容

最新更新

热门标签：