如何解决简单的轮播prev / next jQuery函数-prev函数不起作用
以下轮播中的“ PREV” jquery函数有问题,请帮忙。
<div id="carousel">
<div id="product-detail-image-wrapper">
<div id="product-detail-image-inner-wrapper">
<img class="product-detail-image" src="images/01.jpg" />
<img class="product-detail-image" src="images/02.jpg" />
<img class="product-detail-image" src="images/03.jpg" />
<img class="product-detail-image" src="images/04.jpg" />
<img class="product-detail-image" src="images/05.jpg" />
</div>
<img id="image-control-left" src="images/left-arrow.png" onclick="showPrev();" />
<img id="image-control-right" src="images/right-arrow.png" onclick="showNext();" />
</div>
</div>
showNext()函数运行完美。但是showPrev()无法正常工作。
$(document).ready(function(){
//hide all the images except the first one...
$('#product-detail-image-inner-wrapper img:gt(0)').hide();
});
function showNext() {
$('#product-detail-image-inner-wrapper :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('#product-detail-image-inner-wrapper');
}
function showPrev() {
$('#product-detail-image-inner-wrapper :first-child').fadeOut()
.last('img').fadeIn()
.end().prependTo('#product-detail-image-inner-wrapper');
}
谁能告诉我showPrev()函数中的错误是什么?我尝试了很多次,但是没有用。非常感谢。
在showNext()函数中,单击“下一个”按钮时,图像“ 01”将淡出,图像“ 02”将淡入,然后图像“ 01”将如下所示转到列表的末尾: / p>
<div id="product-detail-image-inner-wrapper">
<img class="product-detail-image" src="images/02.jpg" />
<img class="product-detail-image" src="images/03.jpg" />
<img class="product-detail-image" src="images/04.jpg" />
<img class="product-detail-image" src="images/05.jpg" />
<img class="product-detail-image" src="images/01.jpg" />
</div>
上面的最后4行将设置为“ display:none;”。 我期望在showPrev()函数的反向模式中具有相同的行为。
解决方法
如果打开DevTols,您会看到未选择正确的图像,也未正确移动到第一位。
向后移动时,您需要:淡出第一张图像,找到最后一张,将其淡入并移动到第一位置。
function showPrev() {
$('#product-detail-image-inner-wrapper :first-child').fadeOut()
.nextAll('img:last-of-type').fadeIn().end();
$("#product-detail-image-inner-wrapper :last-child").prependTo('#product-detail-image-inner-wrapper');
}
工作示例:
$(document).ready(function() {
//hide all the images except the first one...
$('#product-detail-image-inner-wrapper img:gt(0)').hide();
});
function showNext() {
$('#product-detail-image-inner-wrapper :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('#product-detail-image-inner-wrapper');
}
function showPrev() {
$('#product-detail-image-inner-wrapper :first-child').fadeOut()
.nextAll('img:last-of-type').fadeIn().end();
$("#product-detail-image-inner-wrapper :last-child").prependTo('#product-detail-image-inner-wrapper');
}
img {
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel">
<div id="product-detail-image-wrapper">
<div id="product-detail-image-inner-wrapper">
<img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.dAEeeFKKWyKvfi09BT_b7QHaFj%26pid%3DApi&f=1" title="1" />
<img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.hUrigs4oGP1BPza_niQmnQHaFh%26pid%3DApi&f=1" title="2" />
<img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.w4J0Joa9SQJjntfW3Bl2kgHaD5%26pid%3DApi&f=1" title="3" />
<img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.QEM5dAvEzjYwaND5AmgsQgHaEM%26pid%3DApi&f=1" title="4" />
<img class="product-detail-image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.loIp0wgsX2e_eppiqs-pvgHaHa%26pid%3DApi&f=1" title="5" />
</div>
<button id="image-control-left" onclick="showPrev();">-</button>
<button id="image-control-right" onclick="showNext();">+</button>
</div>
</div>
,
这是与图像搭配的烤面包机的标准代码。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/01.jpg" alt="slide 1">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/02.jpg" alt="slide 2">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/03.jpg" alt="slide 3">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/04.jpg" alt="slide 4">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/05.jpg" alt="slide 5">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。