jQuery 슬라이드쇼 플러그인(썸네일 기능 포함)_jquery

친구의 초대로 회사에서 슬라이드 쇼 효과를 만들어 주게 되었습니다. 효과는 다음과 같습니다.

썸네일 가운데가 현재 재생 중인 사진이고 양면이 서로 다릅니다. , 점차적으로 수축되고 투명도가 감소합니다. 현재 0번째 사진이 재생되고 있다고 가정하면 배열은 다음과 같습니다. 0

1 4

2 사진 게시 후 배열은 다음과 같습니다.

　　4

　　0　3

　1　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　1 2

　 이는 썸네일의 재생 효과일 뿐입니다. 썸네일을 회전하면 오른쪽에서 스크롤되는 해당 큰 사진이 나타납니다. 큰 사진이 들어가는 속도는 썸네일 회전과 일치해야 합니다. 전체적인 효과는 다음과 같습니다.


큰 사진의 스크롤과 썸네일 회전을 결합하는 것을 고려하고 있습니다. 썸네일 회전은 두 부분으로 나누어집니다. 썸네일 회전은 별도의 jQuery 플러그인으로 사용되며 플러그인의 이벤트는 큰 이미지의 스크롤을 구동합니다. 먼저 썸네일 회전 플러그인 구현에 대해 이야기해 보겠습니다.
1. 플러그인 매개변수:



코드 복사

코드는 다음과 같습니다. this.defaults = { auto: false, //자동 재생 여부

width: 85, //썸네일 너비

height: 42, //썸네일의 높이
onstart: null, //스크롤 시작
onchange: null //스크롤 이벤트
}; -in 이벤트:
onstart 이벤트, 회전이 시작될 때마다 한 번 트리거됩니다. 전송되는 매개변수는 현재 썸네일의 jQuery 객체와 다음 썸네일의 jQuery 객체입니다:

코드 복사


코드는 다음과 같습니다.

opt.onstart && opt.onstart(me.Images.img[curIdx].img$, me.Images.img[idx].img$); 거리가 스크롤될 때마다 실행되는 onchange 이벤트 및 현재 스크롤 비율의 진행 매개변수:

코드 복사

코드는 다음과 같습니다.

opt.onchange && opt.onchange(stepPercent[step]); 다음은 stepPercent[step] 배열에 대해 말하면 다음과 같습니다. 썸네일 회전은 시간 제한 및 가변 속도 방법을 채택합니다. 두 장의 사진이 회전되면 시간은 고정되지만 두 장의 사진을 회전하는 속도는 고정되어 있습니다. 이는 사진을 회전하는 것보다 빠르므로 사진이 몇 장이든 스크롤 거리가 얼마나 멀든 관계없이 회전합니다. 스크롤하는 데 오랜 시간이 걸리지 않습니다.

StepPercent[step] 이 배열은 각 회전이 15단계로 이루어지며 각 회전의 거리가 점차 감소하여 가변 속도 효과를 얻습니다.

코드 복사


코드는 다음과 같습니다.

var stepPercent = new Array(15) //Fixed 15단계 수행 , 각 단계는 백분율을 나타내는 숫자 시퀀스에 도달합니다. 경과 시간은 일정하고 속도는 고정되지 않음을 나타냅니다. stepPercent[0] = 0.2; //Start 20% stepPercent[1] = 0.2 0.2 * 0.81> for ( var i = 2, total = stepPercent[1]; i < stepPercent.length; i ) { stepPercent[i] = total (total - stepPercent[i - 2]) * 0.81; total = stepPercent[i];

if (i == stepPercent.length - 1)

stepPercent[i] = 1


첫 번째 단계는 20%이고, 이후의 각 단계는 이전 단계의 81%입니다. 즉, 매번 19%씩 속도가 감소합니다. 그러나 15단계까지 계산에 오류가 있습니다. 1에 매우 가까울 수도 있습니다. 하지만 1이라는 값이 아니기 때문에 15단계를 직접 1, 즉 100%로 설정하면 스크롤이 종료됩니다.
(참고: 이 시퀀스는 어떻게 설계되었나요? Excel을 사용하여 셀을 찾아 0.2를 채웠습니다. 다음 셀의 수식은 이전 셀의 0.81입니다. 그런 다음 조금 더 아래로 드래그한 다음 위의 Accumlating을 입력합니다. 1에 가까운 값이 필요한 단계입니다. )
이 시퀀스가 ​​JS를 사용하여 생성되지 않은 경우 실제로는 Excel에서 생성된 시퀀스에서 직접 배열을 정의할 수 있습니다. , 한 번만 해보세요.
　
회전 시 이 stepPercent 배열에서 설정한 배율을 사용하여 썸네일의 크기, 투명도, 위치 및 기타 정보를 계산합니다.
플러그인에 대한 자세한 내용은 다루지 않겠습니다. 소스 코드를 직접 다운로드하여 썸네일에 따라 큰 그림을 스크롤하는 방법에 대해 이야기하겠습니다.
3. 큰 사진 스크롤
큰 사진을 썸네일과 함께 스크롤하면 어떤 사진으로 스크롤하더라도 현재 큰 사진 바로 뒤에 스크롤되어 너무 많이 건너뛰는 것을 방지하는 효과가 나타납니다. 여러 장의 사진을 찍으면 속도가 너무 빨라 눈부신 느낌이 들기 때문에 여기서는 onstart 이벤트가 유용합니다.
onstart 이벤트에서는 먼저 현재 사진을 큰 사진 목록의 첫 번째 위치로 이동한 후 대상 사진을 현재 사진의 뒤로 이동합니다. (참고: 현재 사진은 큰 사진 목록의 첫 번째 위치로 이동됩니다. 현재 사진은 현재 사진의 첫 번째 위치로 이동이 가능하기 때문에 현재 사진이 뒤로 이동하면 스크롤바 위치가 이동됩니다. .
그런 다음 onchange 이벤트에서 들어오는 진행률 매개변수에 따라 가로 스크롤 막대의 스크롤 거리를 설정하면 됩니다. 큰 이미지의 스크롤은 매우 간단합니다. 구체적인 JS는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$( function() {
$("#div_Slide").Slide({
auto: true,
width: 85,
height: 42,
onstart: function(curImg, nextImg) {
var cData = curImg.attr("data");
var nData = nextImg.attr("data")
var bigCur = $("#" cData), bigNext = $(" #" nData);
var allBigImg = bigCur.parent().children("img");
var curIndex = allBigImg.index(bigCur[0]);
var nextIndex = allBigImg.index( bigNext[0]);
var firstImg = $(allBigImg[0])
if (firstImg.attr("id") != bigCur.attr("id"))
bigCur.insertBefore (firstImg);
$("#div_BigImg").scrollLeft(0);
bigNext.insertAfter(bigCur)
},
onchange: function(percent) {
$( "#div_BigImg").scrollLeft(1263 * 퍼센트);
var bigDiv = $("#div_BigImg")
var bigDiv.position(); 🎜>bigDiv.scrollLeft( 0); //스크롤 막대가 머리 부분에 없을 때 새로 고침을 위해 F5를 누르면 머리 부분으로 이동하지 않는다는 것을 알았기 때문에 처음에는 스크롤 막대를 머리 부분으로 스크롤합니다.
$(" #div_Slide").css({
"top": (bigDivPos.top bigDiv.height() - $("#div_Slide").height()) "px",
"left": bigDivPos. left "px"
}) ;
})


소스 코드 다운로드:
http://xiazai.jb51.net/201101/yuanma/SlideDemo_jb51.rar

사용 중 발견한 점이나 궁금한 점이나 개선할 점은 메시지 남겨주시면 감사하겠습니다.