jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法｜BLACKFLAG

5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたが、ブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。 【横スライドパターン】 jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法 「横スライドパターン：jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法」サンプルを別枠で表示 まずは横方向にスライドするパターンの実装についてです。 Webページに横に並べられた要素が右から左へ流れ続けます。 動作自体はただひたすら要素が流れ続けるシンプルなものです。 スライド全体にマウスオーバーした際には、スライド動作を一時的に止め、マウスアウトするとスライドが再開します。

[canna_koritan]

“.loopSliderWrap { top: 0; left: 0; height: 100px; overflow: hidden; position: absolute;} .loopSlider { margin: 0 auto; width: 500px; height: 100px; text-align: left; position: relative; overflow: hidden;} .loopSlider ul { height: 100px; float: left; overflow: hidden;} .loopSlider ul li { width: 1

[cobu___chan]

“var setElm = $('.loopSlider'), slideSpeed = 2000; setElm.each(function(){ var self = $(this), selfWidth = self.innerWidth(), findUl = self.find('ul'), findLi = findUl.find('li'), listWidth = findLi.outerWidth(), listCount = findLi.length, loopWidth = listWidth * listCount; findUl.wrapAll('<div cl