如何使轮播独立运行 网址:http://vice9988.000webhostapp.com/ 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.container {
width: 100px;
overflow: auto;
}
.slider-inner {
width: 100px;
height: 110px;
position: relative;
overflow: hidden;
float: left;
}
.slider-inner img {
display: none;
width: 100px;
height: 110px;
}
.slider-inner img.active {
display: inline-block;
}
.btn {
background: transparent;
border: none !important;
font-size:0;
}
.nav {
height: 60px;
margin-top: 15px;
}
.next {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 60px solid #006FC4;
border-bottom: 20px solid transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="slider-inner">
<img src="image-1.jpg" alt="T-Shirt-1" class="active">
<img src="image-2.jpg" alt="T-Shirt-2">
<img src="image-3.jpg" alt="T-Shirt-3">
</div>
</div>
<div class="nav">
<button data-id="next" class="btn"><div class="next"></div></button>
</div>
<div class="container">
<div class="slider-inner">
<img src="image-4.jpg" alt="T-Shirt-1" class="active">
<img src="image-5.jpg" alt="T-Shirt-2">
<img src="image-6.jpg" alt="T-Shirt-3">
</div>
</div>
<div class="nav">
<button data-id="next" class="btn"><div class="next"></div></button>
</div>
<script>
$('.next').on('click', function() {
var nextImg = $('img.active').next('.slider-inner img');
if(nextImg.length == 0) {
nextImg = $('.slider-inner img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
</script>
</body>
</html>
第一个旋转木马单独工作时效果很好...但是当我添加第二个旋转木马时...下一个箭头驱动两个旋转木马...
我认为您可以使用 jQuery 键 this() 使轮播独立运行。
提前致谢...
最佳答案
由于您使用类来标识当前事件图像并且该类是通用的，因此标识符将选取所有符合条件的元素。您可以做的是指定一些元素，从而能够限制选择的元素。
将 slider 元素和 slider 控件包装在一个 HTML 元素内。
<div class="sliderContainer">
<div class="container">
<div class="slider-inner">
<img src="image-4.jpg" alt="T-Shirt-1" class="active" />
<img src="image-5.jpg" alt="T-Shirt-2" />
<img src="image-6.jpg" alt="T-Shirt-3" />
</div>
</div>
<div class="nav">
<button data-id="next" class="btn"><div class="next"></div></button>
</div>
</div>
如果您也对 HTML 代码进行相应的更改，以下更改将起作用
<script>
$(".next").on("click", function(event) {
var nextImg = $(event.target).parents(".sliderContainer").find("img.active").next(".slider-inner img");
if (nextImg.length == 0) {
nextImg = $(event.target).parents(".sliderContainer").find(".slider-inner img:first");
}
$(event.target).parents(".sliderContainer").find("img.active").removeClass("active");
nextImg.addClass("active");
});
</script>
关于jquery - 如何让轮播独立运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58477217/