jQuery_jquery를 사용하여 Carousel 플러그인에 새 기능을 추가하는 방법

본 글은 캐러셀 플러그인에 새로운 기능을 추가하기 위해 편집자가 직접 작성한 튜토리얼 영상과 캐러셀 플러그인에 대한 내용입니다. 다른 사이트를 참고하면 하단 버튼에 마우스를 올리거나 클릭하면 Carousel에 첫 번째 프레임과 마찬가지로 버튼과 동일한 첨자가 붙은 li가 표시됩니다.

모든 코드는 여기에 있습니다https://github.com/wwervin72/jQuery-Carousel

시작해 보겠습니다. 가장 먼저 해야 할 일은 이 버튼을 표시하는 것입니다. 따라서 슬라이드 전환을 위한 버튼을 생성하려면 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); 
} 
}, 

그런 다음 Carousel 생성자에서 이 메소드를 실행해야 합니다

this.switchSlideBtn()

이제 여기에 선택 버튼이 추가되었습니다. 이제 우리가 해야 할 일은 마우스가 버튼 위에 놓일 때 각 버튼에 대한 이벤트를 추가하는 것입니다.

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

그런 다음 슬라이드를 Carousel의 프로토타입 개체로 전환하는 메서드도 추가해야 합니다. 왜냐하면 HTML 코드에서 li를 사용하고 그 안에 a 및 Img 태그를 넣기 때문입니다. 따라서 다음 Li는 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]);
});
}
},

여기서 주로 두 가지 문제에 직면했습니다.

1. 이동 후 Carousel에서 각 프레임의 첨자를 구한 후 해당 프레임에 해당 첨자의 속성을 추가하는 방법입니다.

여기서는 li의 길이를 기준으로 0-li.length-1 요소로 배열을 생성하고 Carousel Rotate에서 필요한 경우 각 프레임이 이동된 후 아래 첨자를 식별하기 위해 내부 요소를 사용하여 자체적으로 다시 연결합니다. 즉, 버튼의 첨자가 현재 첫 번째 프레임의 첨자보다 크면 이 배열의 두 번째 절반을 각 프레임의 첨자로 사용하고 왼쪽으로 이동해야 합니다(버튼 첨자 - 현재 첫 번째 프레임 A 프레임 인덱스) 위치이고, 이 위치의 요소는 회전 후 각 프레임의 인덱스입니다. 오른쪽으로 회전해도 마찬가지이다. 그러나 배열의 전반부를 차례로 이동해야 합니다.

2. 마우스를 사용하여 버튼을 빠르게 움직일 때 일부 버그가 나타나는 이유는 이전 애니메이션이 완료되기 전에 다음 이벤트가 발생하기 때문입니다.

그런 다음 이벤트 실행을 제한하기 위해 self.rotateFlag 플래그를 사용해야 합니다. 그러나 많은 테스트를 거친 후 플래그가 false로 지정된 명령문을 회전 메서드 앞에 배치할 수 없다는 사실을 발견했습니다. 이는 메서드에서 if 조건문의 시작 부분에 배치하는 경우에도 문제가 발생합니다. 문제 없습니다.

자, 이제 Carousel 확장 기능을 소개했습니다. 다른 부분은 소개하지 않겠습니다. 관심 있는 친구들은 제가 위에 알려드린 주소로 가서 다운로드해서 보실 수 있습니다. 동시에 Script House 웹사이트에 대한 귀하의 지원에 진심으로 감사드립니다!