javascript - 如何使用 Image Carousel 控件 jQuery

Question

我正在尝试制作自定义 jQuery 图像轮播。我已经创建了 next 和 prev 按钮，next 控件工作正常但 prev 控件不工作t 显示出预期的结果。

fiddle :https://jsfiddle.net/ojxy3o0g/1/

我想要当 current = 1 并且用户点击上一个按钮时图像集中的最后一个按钮显示我正在尝试

我的 HTML

<div class="slider">
    <ul>
        <li><img src="img/img1.gif" alt="image" id="a"></li>
        <li><img src="img/img2.gif" alt="image"></li>
    </ul>
</div>
<div id="slider-nav">
    <button data-dir="prev">Previous</button>
    <button data-dir="next">Next</button>
</div>

我的JS

(function(){


var imgLength = $('img').length;
var imgWidth  = $('img')[0].width;
var totalImageLength = imgLength * imgWidth;
var current = 1;
var currentImage = $('img');

$('button').on('click',function(){

    if($(this).data('dir') === 'next')
    {
        current++;
        currentImage.animate({
            'left':'-=600px'
        });


        if(current > imgLength)
        {
            currentImage.animate({
                'left':'0px'
            });
            current = 1;

        }
    }

    if($(this).data('dir') === 'prev'){

        current--;
        currentImage.animate({
                'left':'+=600px'
        });

        // if(current < 1)

        // }
    }

}); 


})();

Answer 1

使用 imgLength:

    if(current < 1)
    {
        currentImage.animate({
            'left': (600 * (1 - imgLength)) + 'px'
        });
        current = imgLength;

    }

UPDATED FIDDLE