jQuery_jqueryをベースにした画像の左右シームレススクロールプラグイン

オンライン デモ: http://demo.jb51.net/js/2012/myslideLeftRight/
パッケージのダウンロード: http://www.jb51.net/jiaoben/44973.html
コア コード:

コードをコピー コードは次のとおりです:

( function($ ){
$.fn.extend({
"slidelf":function(value){
value = $.extend({
"prev":"",
"next" :"",
"speed":""
},value)
var dom_this = $(this).get(0); // jquery オブジェクトを DOM オブジェクトに変換します。他の関数では Call;
var marginl = parseInt($("ul li:first",this).css("margin-left")); //各画像のマージンの値
var movew = $ ("ul li:first",this).outerWidth() marginl; //スライドする必要がある値
//左側のアニメーション
function leftani(){
$(" li:first",dom_this).animate({"margin-left":-movew},value.speed,function(){
$(this).css("margin-left",marginl).appendTo( $("ul",dom_this) );
});
}
//右側のアニメーション
function rightani(){
$("ul li:last",dom_this ).prependTo($("ul" ,dom_this));
$("ul li:first",dom_this).css("margin-left",-movew).animate({"margin-left": marginl},value.speed);
}
// 左側をクリック
$("." value.prev).click(function(){
if(!$("ul li:first",dom_this).is(" :animated")){
leftani();
}
});
//左をクリック
$(". " value.next).click(function(){
if(!$("ul li:first",dom_this).is(":animated")){
rightani();
}
})
}
} ; (ここでは、動きを実現するために負の margin-left が使用されています。)
2. スライドが完了したら、この LI を最後の LI に挿入します (シームレスなスクロールを実現するため)
右側をクリックします --

1. 最後の LI を最初のすべての LI に挿入し、表示領域の外側に配置します (ここではマージンを使用します)
2. 次に、表示領域にスライドさせます。
注: ここでの IF 判定ステートメントは、「左」または「右」ボタンの連続クリックによるバグを防ぐためのものです。
この判定の意味: LI がアニメーション状態でない場合にのみ、移動関数を実行します。 。アニメーションしている限り、クリックしても何も起こりません。