如何使用Image Carousel控件jQuery

How to work with Image Carousel controls jQuery

本文关键字：控件 jQuery Carousel Image 何使用      更新时间：2023-09-26

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

小提琴: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)
        // }
    }
}); 

})();

使用imgLength:

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

更新小提琴

相关文章：