javascript - 单击“后退”按钮时，从幻灯片中的第一张图像立即移动到最后一张图像

问题描述

我有 5 张图片想在幻灯片播放中显示。我使用了来自互联网的以下代码并稍作修改。幻灯片有两个按钮，右侧的前进按钮和左侧的后退按钮。前进按钮功能完全正常。单击它时，它会按顺序正确显示：
Image_1 -> Image_2 -> Image_3 -> Image_4 -> Image_5 -> Image_1 -> Image_2 -> 依此类推...

但问题出在后退按钮上，它正确显示为： Image_5 -> Image_4 -> Image_3 -> Image_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>

标签： javascripthtmlcss

javascript - 单击“后退”按钮时，从幻灯片中的第一张图像立即移动到最后一张图像

问题描述

解决方案

推荐阅读