我有一个图片库,其中包含一些大图片,其中大图片是下面的图片之一。但是,当我添加一个新的图片库时,它将覆盖旧的图片库,当我单击这些图片时,它将更改不需要的第一张图片库图像。我认为我的JavaScript代码中存在一些错误,并且它以我的所有画廊为目标,我能否做到这一点,使其仅以点击的图片为目标? 这是一个小提琴:https://jsfiddle.net/u8pbtLra/
这是代码
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var xSlides = slides.length;
alert(xSlides);
var slideIndexes = [0,1,0];
alert(slideIndexes);
var dots = document.getElementsByClassName("demo");
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(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
html:
<div class="container2">
<div class="mySlides">
<div class = "bb" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328);"></div>
<!-- The above div is the problem -->
</div>
<div class="mySlides">
<img src="https://i.stack.imgur.com/FyV3d.gif" style="width:100%">
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328" onclick="currentSlide(1)" width="100%" alt="text">
</div>
<div class="column">
<img class="demo cursor" src="https://i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(2)" alt="text">
</div>
</div>
</div>
答案 0 :(得分:2)
代码的问题是两个画廊都使用了相同的类。如果您不想重命名类,则可以将this
传递给单击处理程序,然后找到父元素。然后,您可以将父元素传递给showSlides
函数以获取独立的幻灯片。
有多种方法可以改进代码,但我保留了所提供的代码。
请参见以下示例:
var slideIndex = 1;
let wrappers = document.querySelectorAll(".wrapper");
wrappers.forEach(function(el) {
showSlides(slideIndex, el);
});
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(el, n) {
// Get the wrapper element and pass it as a variable to showSlides
let wrapper = el.closest(".wrapper");
showSlides(slideIndex = n, wrapper);
}
function showSlides(n, wrapper) {
var i;
// find only the slides and dot that are decedents of current wrapper
var slides = wrapper.querySelectorAll(".mySlides");
var dots = wrapper.querySelectorAll(".demo");
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("active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.container3 {
position: absolute;
height: 100px;
width: 20%;
margin: auto;
right: 0;
left: 0;
}
.container2 {
position: absolute;
height: 100px;
width: 20%;
margin: auto;
right: 0;
left: 0;
bottom: 0;
}
.bb {
height: 100px;
background: center center no-repeat;
background-size: cover;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.row {
width: 100%;
display: flex;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
<!-- add wrapper class -->
<div class="container3 wrapper">
<div class="mySlides">
<div class="bb" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328);"></div>
<!-- The above div is the problem -->
</div>
<div class="mySlides">
<img src="https://i.stack.imgur.com/FyV3d.gif" style="width:100%">
</div>
<div class="row">
<div class="column">
<!-- pass this to handler -->
<img class="demo cursor" src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328" onclick="currentSlide(this,1)" width="100%" alt="text">
</div>
<div class="column">
<!-- pass this to handler -->
<img class="demo cursor" src="https://i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(this, 2)" alt="text">
</div>
</div>
</div>
<!-- add wrapper class -->
<div class="container2 wrapper">
<div class="mySlides">
<div class="bb" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328);"></div>
<!-- The above div is the problem -->
</div>
<div class="mySlides">
<img src="https://i.stack.imgur.com/FyV3d.gif" style="width:100%">
</div>
<div class="row">
<div class="column">
<!-- pass this to handler -->
<img class="demo cursor" src="https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=328" onclick="currentSlide(this,1)" width="100%" alt="text">
</div>
<div class="column">
<!-- pass this to handler -->
<img class="demo cursor" src="https://i.stack.imgur.com/FyV3d.gif" width="100%" onclick="currentSlide(this, 2)" alt="text">
</div>
</div>
</div>