如何创建一个简单的滑块？

Question

我已经构建了以下旋转木马，但是当我到达最后一张图片或第一张图片时，我想返回我想显示需要显示的图片。例如，当您点击向右箭头显示第一张图片时到达最后一张图片。

有人知道如何改进吗？

jQuery(document).ready(function ($) {

        var currentPosition = 0;
        var slideWidth = 1200;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var slideShowInterval;
        var speed = 7000;

        slideShowInterval = setInterval(changePosition, speed);
        slides.wrapAll('<div id="slidesHolder"></div>')
        slides.css({ 'float' : 'left' });
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);
        $('#slideshow')
            .append('<span class="nav" id="leftNav"></span>')
            .append('<span class="nav" id="rightNav"></span>');
        manageNav(currentPosition);
        $('.nav').bind('click', function() {
            currentPosition = ($(this).attr('id')=='rightNav')
            ? currentPosition+1 : currentPosition-1;                            
            manageNav(currentPosition);
            clearInterval(slideShowInterval);
            slideShowInterval = setInterval(changePosition, speed);
            moveSlide();
        });
        function manageNav(position) {
            $('#leftNav').css('position','absolute') 
            $('#rightNav').css('position','absolute')
        }
        function changePosition() {
            if(currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
                manageNav(currentPosition);
            } else {
                currentPosition++;
                manageNav(currentPosition);
            }
            moveSlide();
        }
        function moveSlide() {
                $('#slidesHolder')
                  .animate({'marginLeft' : slideWidth*(-currentPosition)});
        }
});

Answer 1

在系统的 right/left 端对 'wrap' 产生 'carousel' 效果的标准方法是使用模 %.

考虑您的代码：

currentPosition = ($(this).attr('id')=='rightNav')
            ? currentPosition+1 : currentPosition-1;

为右侧添加一个位置，为左侧删除一个位置。现在，我们需要 "bound/wrap" 它在限制范围内。这很简单，有：

currentPosition = (currentPosition + numberOfSlides) % numberOfSlides;

那有什么作用？

如果 currentPosition 为 -1，它会添加全部数量，最后得到 numberOfSlides - 1，模数无效。

如果 currentPosition 大于 0，它将变成大于 numberOfSlides 的值，模（余数）函数将恢复它的正确值。

Answer 2

我修复了你的滑块。 Fiddle: JSFIDDLE

if(currentPosition > numberOfSlides-1){
    currentPosition = 0;
}
if(currentPosition < 0){
    currentPosition = numberOfSlides-1;
}

刚刚添加了几个 if =)

如何创建一个简单的滑块？

How to create a simple slider?

javascript

css

jquery

slider