(function($) { $.fn.infiniteFlow = function(options) { var wrapper = this; var defaults = { direction: 'left', // 移動方向 'left' or 'right' onmouseStop: false, // オンマウス時に停止するかどうか true or false speed: 3000 // 移動スピード }; // 設定した要素が存在するときだけ実行 if(wrapper.length) { var setting = $.extend(defaults, options), // 移動する要素 infiniteArea = wrapper.children(); // 各要素のCSS初期設定 wrapper.css({ position: 'relative', width: '100%', overflow: 'hidden' }); infiniteArea.css({ position: 'relative', margin: 0, padding: 0 }).children('li').css({ float: 'left', listStyle: 'none' }); // バナーの初期枚数 var bnrInitLength = infiniteArea.children('li').length, // バナーの横幅(マージンなど含む) bnrWidth = infiniteArea.children('li').outerWidth(true), // バナーの移動距離 posX = 0, // function内で使う変数の宣言 infiniteFunc, windowWidth, bnrLength, infiniteAreaWidth; // バナーのループ移動処理 function infiniteBnr() { infiniteFunc = setInterval(function() { // 移動方向が右の時 if(setting.direction == 'right') { // バナー1つ分以上移動している時 if (posX >= bnrWidth) { // 移動距離を0に戻す posX = 0; // 最後尾のバナーを先頭に移動 infiniteArea.children('li:last-child').prependTo(infiniteArea); } // 移動距離に+1 posX += 1; // 要素の移動 infiniteArea.css({ left: posX - bnrWidth + 'px' }); // 移動方向が左の時 } else { // バナー1つ分以上移動している時 if (- posX >= bnrWidth) { // 移動距離を0に戻す posX = 0; // 先頭のバナーを最後尾に移動 infiniteArea.children('li:first-child').appendTo(infiniteArea); } // 移動距離に-1 posX -= 1; // 要素の移動 infiniteArea.css({ left: posX + 'px' }); } }, (setting.speed / bnrWidth)); } // バナーの追加 function addBnr() { // 画面幅の取得 windowWidth = $(window).width(), // バナーの現在の枚数 bnrLength = infiniteArea.children('li').length, // 移動要素の幅 infiniteAreaWidth = bnrLength * bnrWidth; // 画面幅より移動要素の幅(+バナーi枚分の幅)が小さい場合 while (windowWidth >= infiniteAreaWidth - bnrWidth){ // バナーの追加 for(var i = 0; i < bnrInitLength; i++) { infiniteArea.children('li').eq(i).clone().appendTo(infiniteArea); } // 各要素のCSS設定 settingCss(); } } // 各要素のCSS設定 function settingCss() { // バナーの現在の枚数 bnrLength = infiniteArea.children('li').length, // 移動要素の幅 infiniteAreaWidth = bnrLength * bnrWidth; // 各要素の指定 infiniteArea.css({ width: infiniteAreaWidth }).children('li').css({ float: 'left', listStyle: 'none' }); } // 各要素のCSS設定 settingCss(); // 読み込み後の処理 $(window).on('load', function() { addBnr(); infiniteBnr(); }); var timer = null; // リサイズ時の処理 $(window).on('resize', function() { // 0.2秒リサイズ処理が発生しなかったら実行 clearTimeout(timer); timer = setTimeout(function() { addBnr(); }, 200); }); // 移動停止の処理 if(setting.onmouseStop) { // オンマウス時に移動を止める infiniteArea.on('mouseenter', function() { clearInterval(infiniteFunc); }); // マウスを外した時に移動を再開 infiniteArea.on('mouseleave', function() { infiniteBnr(); }); } } } })(jQuery);