我在"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((函数运行良好。但是showPrevi((不起作用。
一开始，只有第一个图像会显示，其他图像不会显示。
$(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');
}
有人能告诉我showPrevi((函数出错了吗？我试了很多次，但都不起作用。非常感谢。
在showNext((函数中，当单击"；下一个"；按钮、图像"；01〃；将淡出并且图像"；02〃；将淡入；01〃；会像这样进入列表的末尾：
<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行将被设置为"0"；显示：无&"；。在showPrevi((函数的反向模式中，我期望有同样的行为。
如果你打开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>这里是crussel与您的图像的标准代码。
<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>