Jquery 기반 슬라이드 세트 효과 패키지 다운로드

개선 부분 1.큰 그림 은 브 라 우 저 해상도 에 따라 자동 으로 크기 를 조정 할 수 있 습 니 다.현 재 는 고정된 너비 와 높 은 디 스 플레이 에 따라 부분 을 초과 하여 숨 깁 니 다.2.큰 그림 은 현재 모든 것 을 직접 불 러 옵 니 다.그림 이 많 을 때 체험 이 좋 지 않 습 니 다.비동기 로 딩 하거나 지연 로 딩 으로 변경 할 수 있 습 니 다.이것 은 jquery 컨트롤 lazyload 로 구현 할 수 있 습 니 다.3.미리 보기 그림 은 업로드 할 때 설정 한 매개 변수 에 따라 직접 생 성 되 며 세로 그림 이면 압축 되 는 경우 가 있 습 니 다.부분 만 표시 하고 부분 을 초과 하여 숨 길 수 있 습 니 다.4.미리 보기 그림 목록 의 미끄럼 은 jcarousellite 플러그 인 을 사용 합 니 다.슬라이드 를 플러그 인 으로 추출 하려 면 하나 로 통합 해 야 합 니 다.5.현재 큰 그림 영역 과 미리 보기 그림 영역 은 상대 적 으로 독립 되 어 있 습 니 다.장점 은 직관 적 이 고 디 스 플레이 위 치 를 마음대로 변경 할 수 있 습 니 다.단점 은 HTML 의 코드 양 이 비교적 많 습 니 다.일부 플러그 인 이 아 닌$('\#ID')만 있 으 면 됩 니 다.JS 코드

 
<script type="text/javascript"> 
var currentImage; 
var currentIndex = -1; 
//    (  index 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': 'none', 'z-index': 1 }) 
}); 
} 
} 
//         
$(indexImage).show().css({ 'opacity': 0.4 }); 
$(indexImage).animate({ opacity: 1 }, { duration: 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; 
showImage(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); 
}); 
}); 
</script> 

온라인 데모:http://demo.jb51.net/js/2011/Gallery/index.html포장 다운로드:/201102/yuanma/Gallery_jb51.rar