JavaScript或jQuery图像旋转木马/ filmstrim
我正在寻找一些符合以下规范的原生JavaScript或jQuery插件。JavaScript或jQuery图像旋转木马/ filmstrim
- 按顺序移过一组图像(
ul
/li
) - 连续运动,而不是寻呼
- 显示无限的,在开始的无缝重启
- 能力暂停悬停
- 不需要或最小的额外插件
我意识到这听起来很简单。但我已经浏览了网页,并尝试使用Cycle和jCarousel/Lite,但没有运气。我觉得自己应该存在,并希望在写我自己之前提出这个问题。
任何方向表示赞赏。谢谢。
这两个答案都由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-08-25 02:17:07
对不起,我阅读旋转木马,这是第一个想到的插件。 – MoDFoX 2010-08-25 02:34:06
谢谢,但这似乎并不符合多图像显示或连续运动规范。我会仔细看看。 – 2010-08-25 00:55:38
@Jason,你可以设置动画的速度,所以你可以将它设置得非常低,并有持续移动的感觉。 – GSto 2010-08-25 13:08:04