Cara menambah fungsi baharu pada pemalam Carousel dengan jQuery_jquery

Artikel ini ialah video tutorial yang ditulis oleh editor untuk menambah fungsi baharu pada pemalam karusel dan tentang pemalam Karusel. Merujuk kepada laman web lain, apabila tetikus diletakkan pada butang bawah atau diklik, Karusel akan memaparkan li dengan subskrip yang sama dengan butang seperti bingkai pertama.

Semua kod ada di sinihttps://github.com/wwervin72/jQuery-Carousel

Mari kita mulakan Perkara pertama yang perlu kita lakukan ialah memaparkan butang ini. Jadi kita perlu menambah kaedah pada objek prototaip Carousel untuk menjana butang untuk menukar slaid.

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); 
} 
}, 

Kemudian kita perlu menjalankan kaedah ini dalam pembina Carousel

ini.switchSlideBtn();

Kini di sini, butang pilihan kami telah ditambah. Apa yang perlu kita lakukan sekarang ialah menambah acara untuk setiap butang apabila tetikus diletakkan di atasnya.

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

Kemudian kami juga perlu menambah kaedah untuk menukar slaid ke objek prototaip Carousel, kerana dalam kod HTML kami menggunakan li dan meletakkan tag a dan Img di dalamnya, jadi Li berikut ialah setiap elemen Carousel .

//用切换幻灯片的按钮切换幻灯片的方法
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]);
});
}
},

Saya sering menghadapi dua masalah di sini:

1. Cara mendapatkan subskrip setiap bingkai dalam Carousel selepas pergerakan, dan kemudian tambahkan atribut subskrip yang sepadan pada bingkai yang sepadan.

Di sini saya mencipta tatasusunan dengan elemen 0-li.length-1 berdasarkan panjang li, dan concat sendiri sekali lagi, menggunakan elemen di dalam untuk mengenal pasti subskrip selepas setiap bingkai dialihkan, jika ia diperlukan oleh Carousel Rotate ke kiri, iaitu, subskrip butang lebih besar daripada subskrip bingkai pertama semasa, maka kita perlu menggunakan separuh kedua tatasusunan ini sebagai subskrip setiap bingkai, dan bergerak ke kiri (subskrip butang - kedudukan bingkai pertama semasa A indeks bingkai), dan kemudian elemen kedudukan ini ialah indeks setiap bingkai selepas putaran. Perkara yang sama berlaku jika ia diputar ke kanan. Tetapi anda perlu memindahkan separuh pertama tatasusunan satu demi satu.

2. Apabila kita menggunakan tetikus untuk bergerak dengan pantas pada butang, beberapa pepijat akan muncul Ini kerana peristiwa seterusnya dicetuskan sebelum animasi sebelumnya selesai.

Maka di sini kita perlu menggunakan bendera untuk mengehadkan pelaksanaan acara, iaitu self.rotateFlag di sini. Tetapi selepas banyak ujian, saya mendapati bahawa pernyataan dengan bendera yang ditetapkan kepada palsu tidak boleh diletakkan di hadapan kaedah berputar Ini juga akan menyebabkan masalah Apabila kita meletakkannya pada permulaan pernyataan bersyarat dalam kaedah, Pada asasnya tiada masalah.

Baiklah, kini kami telah memperkenalkan fungsi sambungan Carousel. Saya tidak akan memperkenalkan bahagian lain yang berminat boleh pergi ke alamat yang saya berikan di atas untuk memuat turun dan melihat. Pada masa yang sama, terima kasih banyak atas sokongan anda terhadap laman web Script House!