jquery - 具有响应式设计的 jQuery 滑块

Question

我希望我的网站具有响应性，因此我更改了我的图像，即 3 种不同尺寸的精灵图像。

现在我有了这段代码，如果我所有的图像的宽度都是 600px，它就可以工作，但现在我想要

left: '-=600px'改变所以它需要slideWidth。但是我该怎么做呢？

$(function() {
    var slides = $('.slide');
    var numberSlides = slides.length;
    var slideWidth = $('.slide').width();
    var wrap = $('#slideWrap')

    wrap.width(numberSlides * slideWidth);

    function moveMent() {
        for(r=0; r<100; r++) {
            for(i=0; i<numberSlides-1; i++) {
                wrap
                    .delay(3000)
                    .fadeTo(500, 0)
                    .animate({  
                    /*THIS NEEDS TO BE CHANGED:*/            
                        left : '-=600px'
                    })
                    .fadeTo(500, 1) 
            }
            wrap.delay(3000).fadeTo(500, 0).animate({left : '0'}).fadeTo(500, 1);
        }
    };

    moveMent(); 

 });

Answer 1

只需将left动画属性设置为-slideWidth：

$(function() {
var slides = $('.slide');
var numberSlides = slides.length;
var slideWidth = $('.slide').width();
var wrap = $('#slideWrap')

wrap.width(numberSlides * slideWidth);

function moveMent() {
    for(r=0; r<100; r++) {
        for(i=0; i<numberSlides-1; i++) {
            wrap
                .delay(3000)
                .fadeTo(500, 0)
                .animate({  
                /*THIS NEEDS TO BE CHANGED:*/            
                    left : '-=600px'
                })
                .fadeTo(500, 1) 
        }
        wrap.delay(3000).fadeTo(500, 0).animate({left : '0'}).fadeTo(500, 1);
    }
};

moveMent(); 

});

这是一个概念证明。