我有5个图像，我想在幻灯片播放中显示。我使用了以下来自互联网的代码，并对其进行了轻微修改。幻灯片有两个按钮，右前方按钮和左后方按钮。前进按钮功能完全正常。单击它时，它将正确显示在序列中：
Image_1->图像2->图像3->图像4->图像_5->图像_1->图像2->等等…
但问题出在后退按钮上，它正确显示为：图像_5->图像4->图像3->图像2->Image_1.但在此之后，再次单击后退按钮，我希望它显示为Image_1->Image_5，而不会在Image_2到Image_4之间快速切换。我无法执行此操作。正在创建文件javascript.js中的函数sliderFaLeft.on('click'，function(({}以执行相同操作，但未成功。
/*File : javascript.js*/
$(function()
{
"use strict";
var main_image_class = $('.main_image_class'),
slider = main_image_class.find('.slider'),
sliderUl = slider.find('.slider-parent'),
sliderUlLi = sliderUl.find('.images-list'),
sliderOl = slider.find('.bottom-circles'),
sliderOlLi = sliderOl.find('.bottom-circles-list'),
sliderFaRight = slider.find('> .fa:first-of-type'),
sliderFaLeft = slider.find('> .fa:last-of-type'),
sliderTime = 1000,
sliderWait = 3000,
sliderSetInt,
resumeAndPause;
function resetWH()
{
slider.width(slider.parent().width()).height(slider.parent().width() * 0.5);
sliderUl.width(slider.width() * sliderUlLi.length).height(slider.height());
sliderUlLi.width(slider.width()).height(slider.height());
}
resetWH();
function runSlider()
{
if (sliderOlLi.hasClass('slider-active'))
{
sliderUl.animate(
{
marginLeft: -slider.width() * ($('.slider-active').data('slider') - 1)
},
sliderTime);
}
sliderFaLeft.fadeIn();
sliderFaRight.fadeIn();
}
function runRight()
{
slider.each(function()
{
$('.slider-active').next().addClass('slider-active').siblings().removeClass('slider-active');
runSlider();
});
}
function runLeft()
{
slider.each(function()
{
$('.slider-active').prev().addClass('slider-active').siblings().removeClass('slider-active');
runSlider();
});
}
sliderSetInt = function autoRunSlider()
{
if ($('.slider-active').next().is(':last-of-type'))
{
sliderUl.animate(
{
marginLeft: -sliderUlLi.width() * $('.slider-active').data('slider')
},
sliderTime,
function()
{
sliderUl.css('margin-left', 0);
sliderOlLi.first().addClass('slider-active').siblings().removeClass('slider-active');
});
}
else
{
runRight();
}
};
resumeAndPause = setInterval(sliderSetInt, sliderWait);
$(window).on('resize', function()
{
resetWH();
});
slider.each(function()
{
sliderOlLi.click(function()
{
$(this).addClass('slider-active').siblings().removeClass('slider-active');
runSlider();
});
});
sliderFaRight.on('click', function()
{
if ($('.slider-active').next().is(':last-of-type'))
{
sliderUl.animate(
{
marginLeft: -sliderUlLi.width() * $('.slider-active').data('slider')
},
sliderTime,
function()
{
sliderUl.css('margin-left', 0);
sliderOlLi.first().addClass('slider-active').siblings().removeClass('slider-active');
});
}
else
{
runRight();
}
});
sliderFaLeft.on('click', function()
{
if ($('.slider-active').is(':first-of-type'))
{
/*Missing Code to move the animation from first image to last image through movement in the right direction*/
}
else
{
runLeft();
}
});
slider.find('.fa').hover(function()
{
clearInterval(resumeAndPause);
},
function()
{
resumeAndPause = setInterval(sliderSetInt, sliderWait);
});
});/*File : styles.css*/
.main_image_class .slider ul, .main_image_class .slider ol {
list-style: none;
}
.main_image_class {
width: 75%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
color: #fff;
}
.slider {
position: relative;
}
.slider .slider-parent {
padding: 0;
display: flex;
}
.slider .slider-parent .images-list {
background-size: cover;
}
.slider .slider-parent .images-list:first-of-type, .slider .slider-parent .images-list:last-of-type {
background-image: url(facilities/classroom/image-1.jpeg);
}
.slider .slider-parent .images-list:nth-of-type(2) {
background-image: url(facilities/classroom/image-2.jpeg);
}
.slider .slider-parent .images-list:nth-of-type(3) {
background-image: url(facilities/classroom/image-3.jpeg);
}
.slider .slider-parent .images-list:nth-of-type(4) {
background-image: url(facilities/classroom/image-4.jpeg);
}
.slider .slider-parent .images-list:nth-of-type(5) {
background-image: url(facilities/classroom/image-5.jpg);
}
.slider .bottom-circles {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
bottom: 10px
}
.slider .bottom-circles .bottom-circles-list {
display: inline-block;
}
.slider > .fa {
position: absolute;
top: 45%;
}
.slider > .fa:first-of-type { right: 5px;}
.slider > .fa:last-of-type { left: 5px;}
.slider .fa {
text-shadow: 5px 5px 5px #555;
cursor: pointer;
color: yellow;
}<!--File : index.html-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div class="main_image_class">
<div class="slider">
<ul class="slider-parent">
<li class="images-list" data-slider="1"></li>
<li class="images-list" data-slider="2"></li>
<li class="images-list" data-slider="3"></li>
<li class="images-list" data-slider="4"></li>
<li class="images-list" data-slider="5"></li>
<li class="images-list" data-slider="6"></li>
</ul>
<ol class="bottom-circles">
<li class="bottom-circles-list slider-active" data-slider="1"><i class="fa fa-circle-thin"></i></li>
<li class="bottom-circles-list" data-slider="2"><i class="fa fa-circle-thin"></i></li>
<li class="bottom-circles-list" data-slider="3"><i class="fa fa-circle-thin"></i></li>
<li class="bottom-circles-list" data-slider="4"><i class="fa fa-circle-thin"></i></li>
<li class="bottom-circles-list" data-slider="5"><i class="fa fa-circle-thin"></i></li>
<li class="bottom-circles-list" data-slider="6"></li>
</ol>
<i class="fa fa-chevron-right fa-5x"></i>
<i class="fa fa-chevron-left fa-5x"></i>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>实现这一目标的最佳方法之一是获取整个图像阵列的长度，然后使用-1。可以用于方法：for(i = images.length; i > 0; i--) { images[i] = image }这种方法将获取图像的索引