私は一連の画像を持っていますが、それらはすべて同じ高さですが幅が異なります。固定幅を維持する必要があり、画像を無限ループで左にスライドさせる必要があります。部分的な画像でも表示できるように、コンテナの幅を埋める画像も必要です。スクロールは段階的 (例: 200px) で設定された間隔で行われます。
Cycle、NivoSlider、EasySlider など、多数の jQuery スライドショー プラグインを調べました。しかし、クライアントが必要としているものを正確に教えてくれるものは見たことがありません。クリック可能なナビゲーションやセンタリングは必要ありません。設定された幅のステップと設定された間隔でスクロールする単なる連続フィルムストリップ。
連続ループ部分に関しては、一番左の画像が見えなくなるまで待つことができると考えていました。本来は だけでやってみたのですappend()が、一番左を最後まで動かすとスライドがジャンプしてしまいました。それで、私はそれを最後まで、次に最初から始めようとしましappend()た。clone()$('#slides').children()remove()$('#slides')
これまでのところ、私は持っています：
<div id="outer" style="width:300px;">
<div id="slides">
<img src="/images/slide1.jpg" alt="" style="height:150px;width:200px;" />
<img src="/images/slide2.jpg" alt="" style="height:200px;width:200px;" />
<img src="/images/slide3.jpg" alt="" style="height:150px;width:200px;" />
<img src="/images/slide4.jpg" alt="" style="height:300px;width:200px;" />
</div>
</div>
と
/* some code ideas taken from easySlider */
(function($){
$.fn.stepSlider = function() {
var slideInterval;
this.each(function() {
// this will be the width of $('#slides')
var width = 0;
// shortcut I saw in easySlider code; liked it, used it.
var o = $(this);
// set width of $('#slides') based on total width of child images
o.children().each(function(){width+=$(this).width();});
function scroll() {
o.children().each(
function(index){
// slide each of the children to the left by 150px
$(this).animate({'left':'-=150'}, 2000);
}
);
// after children have been animated() left, check to see
// if the left-most child has gone out of sight
if (o.children(':first-child').position().left + o.children(':first-child').width() < 0) {
// cloning the first child now
var el = o.children(':first-child').clone(true);
// removing the first child
o .children(':first-child').remove();
// trying to reset the css('left') of all of the children now that the first
// element is supposed to be gone
o.children().css('left', o.children(':first-child').position().left + o.children(':first-child').width());
// appending the clone()
o.append(el);
}
}
slideInterval = setInterval(function(){scroll();}, 2000);
});
}
})(jQuery);
スライディングが効く。しかし、最初の画像を最後に移動すると、スライドがジャンプします。そして、物事は完全に停止するところまで崩壊し始めます。
どんな洞察も大歓迎です。いいえ、私は jQuery をまったく初めて使用するわけではありませんが、はい: これは私の最初のプラグインの試みです。
よろしくお願いします