0

次の仕様を満たすネイティブ JavaScript または jQuery プラグインを探しています。

  • 一連の画像を順次移動 ( ul/ li)
  • ページングではなく、継続的な動き
  • 無限に表示され、最初からシームレスに再起動します
  • ホバーで一時停止する機能
  • 追加のプラグインが不要または最小限

これは簡単に聞こえると思います。しかし、私は Web を調べて、Cycle と jCarousel/Lite を試してみましたが、うまくいきませんでした。存在するべきだと感じており、自分で書く前に質問をしたかったのです。

どんな方向でも大歓迎です。ありがとう。

4

3 に答える 3

0

Nivo Sliderをチェックする必要があります。適切な構成で、必要なことを実行できると思います。

于 2010-08-25T00:10:51.070 に答える
0

MoDFoXとGStoによる両方の回答は良好です。通常はこれらのいずれかを使用しますが、これらのプラグインはすべての要件を満たしていませんでした。結局、これはかなり基本的なものだったので、自分で書いただけです。以下に JavaScript を含めました。基本的に、ページ上の要素 (おそらく a) を複製し、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-10T12:50:12.020 に答える
0

jQuery roundabout プラグインでそれを行うことができます。

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

別のプラグインが必要になる場合があります。

于 2010-08-25T01:31:08.350 に答える