javascript – 一个页面上的多个幻灯片显示第一个不再有效
作者:互联网
首先我知道在答案没有解决我的问题之前已经问过这个问题,所以我想再问一遍:
我使用了来自“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/
这里有一个Jsfiddle的例子,但我不明白为什么这里第一个甚至不是幻灯片,第二个也不起作用:/它在我的电脑上呢!我忘了在电脑上说,点击第一张幻灯片上的箭头改变第二张照片上的图片!
我用在互联网上找到的随机图片替换了图片.
解决方法:
我在这里创建了一个解决方案:
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)">❮</a>
<a class="w3-btn-floating w3-display-right" onclick="plusDivs(this,1)">❯</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)">❮</a>
<a class="w3-btn-floating w3-display-right" onclick="plusDivs(this, 1)">❯</a>
</div>
你现在可以为带有’slider’类和唯一id的滑块添加尽可能多的div.
标签:slideshow,javascript,jquery,css 来源: https://codeday.me/bug/20190926/1819781.html