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

制作“旋转木马”效果的标准方法是“围绕系统的右侧/左侧”，使用模%。

考虑你的代码：

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

为右侧添加一个位置，并为左侧删除一个位置。现在，我们需要在限制范围内“绑定/包装”它。这很容易，有：

currentPosition = (currentPosition + numberOfSlides) % numberOfSlides;

这是做什么的？

如果currentPosition是-1，则会添加全部金额，最后会得到numberOfSlides - 1，模数无效。

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

Answer 2

我修了你的滑块。小提琴：JSFIDDLE

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

刚刚添加了几个if＆＃39; s =）

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

2 个答案: