JavaScript或jQuery图像旋转木马/ filmstrim

我正在寻找一些符合以下规范的原生JavaScript或jQuery插件。JavaScript或jQuery图像旋转木马/ filmstrim

按顺序移过一组图像（ul/li）
连续运动，而不是寻呼
显示无限的，在开始的无缝重启
能力暂停悬停
不需要或最小的额外插件

我意识到这听起来很简单。但我已经浏览了网页，并尝试使用Cycle和jCarousel/Lite，但没有运气。我觉得自己应该存在，并希望在写我自己之前提出这个问题。

任何方向表示赞赏。谢谢。

2010-08-25 Jason McCreary

这两个答案都由MoDFoX和GSto都很好。通常我会使用其中的一个，但这些插件不符合所有要求。最后这是非常基本的，所以我只写了我自己的。我已经包含下面的JavaScript。从本质上讲，它克隆页面上的一个元素，大概是ul并将其附加到父容器。这实际上允许从左到右的连续滚动，方法是将元素向左移动，然后将其附加到视图外。当然，您可能需要根据您的CSS调整此代码。

// global to store interval reference 
var slider_interval = null; 
var slider_width = 0; 
var overflow = 0; 

prepare_slider = function() { 
var container = $('.sliderGallery'); 

if (container.length == 0) { 
    // no gallery 
    return false; 
} 

// add hover event to pause slider 
container.hover(function() {clearInterval(slider_interval);}, function() {slider_interval = setInterval("slideleft()", 30);}); 

// set container styles since we are absolutely positioning elements 
var ul = container.children('ul'); 
container.css('height', ul.outerHeight(true) + 'px'); 
container.css('overflow', 'hidden') 

// set width and overflow of slider 
slider_width = ul.width(); 
overflow = -1 * (slider_width + 10); 

// set first slider attributes 
ul.attr('id', 'slider1'); 
ul.css({"position": "absolute", "left": 0, "top": 0}); 

// clone second slider 
var ul_copy = ul.clone(); 

// set second slider attributes 
ul.attr('id', 'slider2'); 
ul_copy.css("left", slider_width + "px"); 

container.append(ul_copy); 

// start time interval 
slider_interval = setInterval("slideleft()", 30); 
} 

function slideleft() { 
var copyspeed = 1; 
var slider1 = $('#slider1'); 
var slider2 = $('#slider2'); 

slider1_position = parseInt(slider1.css('left')); 
slider2_position = parseInt(slider2.css('left')); 

// cross fade the sliders 
if (slider1_position > overflow) { 
    slider1.css("left", (slider1_position - copyspeed) + "px"); 
} 
else { 
    slider1.css("left", (slider2_position + slider_width) + "px"); 
} 

if (slider2_position > overflow) { 
    slider2.css("left", (slider2_position - copyspeed) + "px"); 
} 
else { 
    slider2.css("left", (slider1_position + slider_width) + "px"); 
} 
}

来源

2010-09-10 12:50:12