Simple News/Image Sliderみたいに画像を１列に並べて延々横スクロールさせるやつがjQueryで欲しかったんだけど
検索してもそういうのが見つからなかったからクローン作った。
見た目と動きはオリジナルと大体同じです。
The Code
ターゲットに指定できるのはリスト要素（ULまたはOL）限定です。リスト（LI）の中身は問いません。
$(document).ready(function(){
$('#target').imageSlider();
});
#target {overflow:hidden;}
親要素もしくはwrap要素にoverflow:hiddenしておくこと。
ターゲットに指定された要素にはリストの横幅の合計がセットされます。
表示範囲を限定したい場合はプラグインが作成するwrap要素をoverflow:hiddenにしてwidthを設定してください。
Option
- className (string)
- wrap要素のクラス名。デフォルトはslider-wrapper
- speed (number)
- スクロールのduration。デフォルトは3000
- easing (string)
- スクロールのeasing。デフォルトはlinear
Plugin Source
/**
* jQuery ImageSlider
* https://tenderfeel.xsrv.jp/jquery/980/
* Copyright 2010, Tenderfeel (tenderfeel@gmail.com)
*
* Original source – MooTools ImageSlider
* Copyright (c) 2008-2010 ecce media Ltd (www.eccemedia.com)
* http://www.eccemedia.com/blog/blog.html&blogid=5
*
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($){
$.fn.imageSlider = function(settings) {
var container = null;
var first = null;
var active = false;
settings = $.extend({
className:’slider-wrapper’,
speed: 3000,
easing:”linear”
}, settings);
return this.each(function(){
container = $(this);
container.wrap(“
“);
var containerWidth = 0;
container.find(“li”).each(function(i){
containerWidth += $(this, i).outerWidth(true);
});
container.width(containerWidth);
scroll();
var limit = container.offset().top + container.outerHeight();
$(window).scroll(function(){
if(limit < $(window).scrollTop() && active){ stop();}
else if(!active) scroll();
});
container.hover(function(){stop();},function(){scroll();});
$(window).blur(function(){stop();});
$(window).focus(function(){scroll();});
});
function scroll(){
if(active) return;
active = true;
first = (!first) ? container.find('li:first') : first;
speed = getSpeed();
first.animate({'margin-left': '-'+ (first.outerWidth())},speed, settings.easing,
function(){
first.remove();
first.appendTo(container);
first.css("margin-left", 0);
first = null;
active=false;
scroll();
});
};
function stop(){
active =false;
first = (!first) ? container.find('li:first') : first;
first.stop();
};
function getSpeed(){
var offset = Math.round(Math.abs(Number(first.offset().left)));
var parsent = (offset/first.outerWidth());
if(!offset) return settings.speed;
return settings.speed - Math.round(settings.speed * parsent);
};
};
})(jQuery);
[/js]
complessed:
/**
* jQuery ImageSlider
* https://tenderfeel.xsrv.jp/jquery/980/
* Copyright 2010, Tenderfeel (tenderfeel@gmail.com)
*
* Original source – MooTools ImageSlider
* Copyright (c) 2008-2010 ecce media Ltd (www.eccemedia.com)
* http://www.eccemedia.com/blog/blog.html&blogid=5
*
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function(c){c.fn.imageSlider=function(d){function f(){if(!e){e=true;a=!a?b.find(“li:first”):a;speed=j();a.animate({“margin-left”:”-“+a.outerWidth()},speed,d.easing,function(){a.remove();a.appendTo(b);a.css(“margin-left”,0);a=null;e=false;f()})}}function h(){e=false;a=!a?b.find(“li:first”):a;a.stop()}function j(){var g=Math.round(Math.abs(Number(a.offset().left))),i=g/a.outerWidth();if(!g)return d.speed;return d.speed-Math.round(d.speed*i)}var b=null,a=null,e=false;d=c.extend({className:”slider-wrapper”,
speed:3E3,easing:”linear”},d);return this.each(function(){b=c(this);b.wrap(“
“);var g=0;b.find(“li”).each(function(k){g+=c(this,k).outerWidth(true)});b.width(g);f();var i=b.offset().top+b.outerHeight();c(window).scroll(function(){if(i