Question

我试图制作一个自定义的jQuery图像轮播。我已经创建了next和prev按钮，next控件正常工作，但prev控件未显示所需结果。

我希望当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

如何使用Image Carousel控制jQuery

1 个答案: