javascript - JavaScript 或 jQuery 图像轮播/filmsrim

Question

我正在寻找一些符合以下规范的原生 JavaScript 或 jQuery 插件。

• 依次移动一组图像 ( ul/ li)
• 连续移动，不分页
• 出现无限，从头开始无缝重启
• 能够在悬停时暂停
• 不需要或需要最少的附加插件

我意识到这听起来很简单。但是我浏览了网络并尝试了 Cycle 和 jCarousel/Lite，但没有成功。我觉得应该存在一个问题，并且想在写我自己的问题之前提出这个问题。

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

Answer 1

你应该看看Nivo Slider，我认为通过正确的配置你可以做你想做的事。

Answer 2

您可以使用 jQuery 环形交叉口插件来做到这一点。

http://fredhq.com/projects/roundabout/

它可能需要另一个插件。

Answer 3

MoDFoX和GSto的两个答案都很好。通常我会使用其中之一，但这些插件并不满足所有要求。最后，这是非常基本的，所以我只写了自己的。我在下面包含了 JavaScript。本质上，它克隆页面上的一个元素，大概是 aul并将其附加到父容器。这实际上允许连续滚动，从右到左，通过将元素向左移动然后将其附加到视图之外。当然，您可能需要根据您的 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");
 }
}