jQuery_jquery を使用してカルーセル プラグインに新しい関数を追加する方法

この記事は、カルーセル プラグインに新しい機能を追加するために編集者が作成した、カルーセル プラグインに関するチュートリアル ビデオです。他のウェブサイトを参照すると、マウスを下のボタンに置​​くかクリックすると、カルーセルはボタンと同じ添え字が付いた li を最初のフレームとして表示します。

すべてのコードはここにありますhttps://github.com/wwervin72/jQuery-Carousel

まず始めに、これらのボタンを表示する必要があります。そこで、カルーセルのプロトタイプオブジェクトプロトタイプに、スライドを切り替えるためのボタンを生成するメソッドを追加する必要があります。

switchSlideBtn : function(){
var slideNum = this.posterItems.size(); //获得当前的这个carousel对象的总共的帧数
var str = ''; 
var firstBtnLeft = (this.setting.width-(slideNum-1)*15-slideNum*15)/2; //规定第一个按钮放的位置
for(var i = 0; i<slideNum; i++){
str += '<button class="btn"></button>'; //把每一个btn的代码添加到str字符串中，然后一次性添加到selBtn这里面，避免多次修改DOM
}
$('#selBtn').html(str); 
for(var i = 0;i<slideNum; i++){
$('#selBtn .btn').eq(i).css('left' , firstBtnLeft+i*30); 
} 
}, 

次に、このメソッドをカルーセル コンストラクターで実行する必要があります

this.switchSlideBtn();

ここで、選択ボタンが追加されました。ここで行う必要があるのは、マウスがボタン上に置かれたときに各ボタンにイベントを追加することです。

$('#selBtn .btn').each(function(){
$(this).hover(function(){
if(self.rotateFlag){
self.switchSlide(this);
}
},function(){
});
})

次に、カルーセルのプロトタイプ オブジェクトにスライドを切り替えるメソッドを追加する必要があります。HTML コードでは li を使用し、その中に a タグと Img タグを配置しているため、次の Li はカルーセルの各フレーム要素です。 。

//用切换幻灯片的按钮切换幻灯片的方法
switchSlide : function(btn){
var self = this;
var BtnIndex = $(btn).index(); //获得当前是哪一个按钮执行事件
$('#selBtn .btn').css('background','rgba(255,255,255,.3)');
$('#selBtn .btn').eq(BtnIndex).css('background','rgba(255,255,255,1)');
var level = Math.floor(this.posterItems.size()/2),
posterItemsLength = this.posterItems.size(),
index;
$('.poster-item').filter(function(i,item){
if($(this).css('z-index') == level){ //获得当前显示的第一帧的下标
index = i;
}
});
var nextTime = BtnIndex-index; //向左旋转nextTime次
var arr = [],zIndexArr=[];
for(var i = 0;i < posterItemsLength;i++){ 
arr.push(i); 
}
arr = arr.concat(arr); //添加一个数组，用来模拟Li的下标
if(nextTime > 0){ //prev 左旋转,把数组的后半部分向前移动nextTime个下标
self.rotateFlag = false; //注意这里吧self.rotateFlag这个标识放在里面来修改了。
this.posterItems.each(function(i, item){
var posterItemIndex = arr.lastIndexOf(i); //获得li节点在arr中对应的下标
var tag = $(self.posterItems[arr[posterItemIndex-nextTime]]),
width = tag.width(),
height = tag.height(),
zIndex = tag.css('zIndex'),
opacity = tag.css('opacity'),
left = tag.css('left'),
top = tag.css('top');
zIndexArr.push(zIndex);
$(item).animate({
width : width,
height : height,
opacity : opacity,
left : left,
top : top
},self.setting.speed,function(){
self.rotateFlag = true; //在每一个帧的动画都执行完毕之后，self.rotateFlag改为true，才能执行下一次动画
});
});
self.posterItems.each(function(i){
$(this).css('zIndex',zIndexArr[i]); //把这个z-index提出来单独改变是为了让z-index这个属性的改变最先执行，并且不需要动画
});
}
if(nextTime < 0){ //next 右旋转,把数组的前半部分向后移动nextTime的绝对值个下标
self.rotateFlag = false;
this.posterItems.each(function(i, item){
var posterItemIndex = arr.indexOf(i), //获得li节点在arr中对应的下标
tag = $(self.posterItems[arr[posterItemIndex+Math.abs(nextTime)]]),
width = tag.width(),
height = tag.height(),
zIndex = tag.css('zIndex'),
opacity = tag.css('opacity'),
left = tag.css('left'),
top = tag.css('top');
zIndexArr.push(zIndex);
$(item).animate({
width : width,
height : height,
opacity : opacity,
left : left,
top : top
},self.setting.speed,function(){
self.rotateFlag = true; 
});
});
self.posterItems.each(function(i){
$(this).css('zIndex',zIndexArr[i]);
});
}
},

ここで主に 2 つの問題が発生しました:

1. 移動後のカルーセル内の各フレームの添え字を取得し、対応する添え字の属性を対応するフレームに追加する方法。

ここでは、li の長さに基づいて要素 0-li.length-1 を持つ配列を作成し、カルーセル回転で必要な場合は、各フレームが移動した後の添え字を識別するために内部の要素を使用して、それ自体を再度連結します。左に移動する、つまりボタンの添え字が現在の最初のフレームの添え字より大きい場合、この配列の後半を各フレームの添え字として使用し、左に移動する必要があります (ボタンの添え字 -現在の最初のフレーム (フレーム インデックス) の位置、この位置の要素が回転後の各フレームのインデックスになります。右に回転させた場合も同様です。ただし、配列の前半を次々に移動する必要があります。

2. マウスを使用してボタン上を素早く移動すると、前のアニメーションが完了する前に次のイベントがトリガーされるため、いくつかのバグが発生します。

次に、イベントの実行を制限するフラグを使用する必要があります。ここでは self.rotateFlag です。しかし、多くのテストの結果、false に割り当てられたフラグを持つステートメントを回転メソッドの前に置くことはできないことがわかりました。これは、メソッド内の if 条件ステートメントの先頭に置くと、基本的に問題が発生します。問題ありません。

さて、カルーセル拡張の機能を紹介しました。他の部分は紹介しませんので、興味のある方は上記のアドレスにアクセスしてダウンロードしてご覧ください。同時に、スクリプト ハウス Web サイトをサポートしていただき、誠にありがとうございます。