jquery简单的两个图像轮播

时间:2014-03-20 13:20:39

标签: jquery slider carousel

我正在寻找使用jQuery的极其基本的轮播功能。

它应该:

无限期地在两张图像之间滚动 每两到三秒向左 - 向右滚动 没有导航/按钮/文字

像这样:http://jsfiddle.net/UWbrQ/172/

(function() {
var first = $('.item').first(),
    last = $('.item').last(),
    itemWidth = first.width(),
    carousel = $('.carousel');
carousel.prepend(last.clone()).append(first.clone());
carousel.width(itemWidth * $('.item').length);
carousel.css({left: -itemWidth});
$('.prev').on('click', function(e){
    e.preventDefault();
    carousel.animate({left: '+=' + itemWidth}, 300, function(){
        if(Math.abs(carousel.position().left) < 2) {
            carousel.css({left: -itemWidth * (carousel.children().length - 2)});
        }
    });
    return false;       
});
$('.next').on('click', function(e){
    e.preventDefault();
    carousel.animate({left: '-=' + itemWidth}, 300, function(){
        if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
            carousel.css({left: -itemWidth});
        }
    });
    return false;       
});
})();

但具有自动功能,并且不需要上一个/下一个按钮。

编辑:在这里找到一个好的:http://jsfiddle.net/IrvinDominin/2Kspn/ EDIT2:Nvm,得到它:http://jsfiddle.net/IrvinDominin/2Kspn/1/

但它停在最后的幻灯片上.. TYIA

1 个答案:

答案 0 :(得分:0)

你需要使用jQuery的setTimeout函数每2/3秒调用(触发点击)next

setTimeout(function() {
      // Do something after 2 seconds
}, 2000);