Jquery_jquery 기반 슬라이드쇼 효과 패키지 다운로드

개선할 부분
1. 큰 이미지는 브라우저 해상도에 따라 자동으로 크기가 조정될 수 있으며, 현재는 고정된 너비와 높이에 따라 표시되며, 초과되는 부분은 숨겨집니다.
2. 이제 모든 큰 사진이 직접 로드됩니다. 사진이 많으면 경험이 좋지 않습니다. 비동기 로딩 또는 지연 로딩으로 변경할 수 있습니다. 이는 jquery 제어 지연 로드를 통해 달성할 수 있습니다.
3. 업로드 시 설정한 매개변수에 따라 썸네일이 직접 생성됩니다. 세로 이미지인 경우 압축됩니다. 일부만 표시하고 나머지는 숨기도록 변경할 수 있습니다.
4. jcarousellite 플러그인은 썸네일 목록을 슬라이드하는 데 사용됩니다. 슬라이드가 플러그인으로 추출된 경우 하나로 통합해야 합니다.
5. 현재는 큰 이미지 영역과 썸네일 영역이 상대적으로 독립적이라는 장점이 있고, 표시 위치를 마음대로 변경할 수 있다는 점이 단점입니다. $("# ID")만 필요한 일부 플러그인과 달리 그게 전부입니다.
JS 코드

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

< ;script type="text/javascript">
var currentImage;
var currentIndex = -1
//매개변수 인덱스는 0부터 계산됩니다.
function showImage(index) {
//현재 사진 페이지 번호 업데이트
$(".CounterCurrent").html(index 1)
//왼쪽 및 오른쪽 마우스 동작 숨기기 또는 표시
var len = $(' #OriginalPic img').length;
if (index == len - 1) {
$("#aNext").hide()
}
else {
$( "#aNext").show();
}
if (index == 0) {
$("#aPrev").hide();
else {
$("#aPrev").show();
}
//큰 이미지 표시
if (index < $('#OriginalPic img').length ) {
var indexImage = $('#OriginalPic p')[index];
//현재 이미지 숨기기
if (currentImage) {
if (currentImage != indexImage) {
$(currentImage).css('z-index', 2);
$(currentImage).fadeOut(0, function () {
$(this).css({ 'display': '없음 ', 'z-index': 1 })
})
}
}
//사용자가 선택한 이미지 표시
$(indexImage).show().css ({ '불투명도': 0.4 } );
$(indexImage).animate({ 불투명도: 1 }, { 기간: 200 })
//변수 업데이트
currentImage = indexImage; currentIndex = index;
/ /하이라이트 제거 및 추가
$('#ThumbPic img').removeClass('active')
$($('#ThumbPic img')[index]). addClass('active') ;
//왼쪽 및 오른쪽 마우스 동작 영역의 높이 설정
//var tempHeight = $($('#OriginalPic img')[index]).height();
//$( '#aPrev').height(tempHeight)
//$('#aNext').height(tempHeight)
}
}
//다음
function ShowNext() {
var len = $('#OriginalPic img').length;
var next = currentIndex < (len - 1) ? currentIndex 1 : 0; next);
}
//이전 사진
function ShowPrep() {
var len = $('#OriginalPic img').length
var next = currentIndex == 0 ? (len - 1 ) : currentIndex - 1;
showImage(next);
}
//다음 이벤트
$("#aNext").click(function () {
ShowNext () ;
if ($(".active").position().left >= 144 * 5) {
$("#btnNext").click()
} >} );
//이전 이벤트
$("#aPrev").click(function () {
ShowPrep();
if ($(".active").position( ).left <= 144 * 5) {
$("#btnPrev").click();
}
})
//초기화 이벤트
$(". OriginalPicBorder").ready(function () {
ShowNext();
//썸네일 클릭 이벤트 바인딩
$('#ThumbPic li').bind('click', function (e) {
var count = $(this).attr('rel');
showImage(parseInt(count) - 1)
})



온라인 데모:
http://demo.jb51.net/js/2011/Gallery/index.html

패키지 다운로드:

/201102 /yuanma /Gallery_jb51.rar