Download the slideshow effect package based on Jquery_jquery

Parts to be improved
1. Large images can be automatically scaled according to the browser resolution. Currently, they are displayed according to a fixed width and height, and the excess part is hidden.
2. All large pictures are now loaded directly. If there are many pictures, the experience is not good. It can be changed to asynchronous loading or lazy loading. This can be achieved with the jquery control lazyload.
3. The thumbnail is generated directly based on the parameters set when uploading. If it is a vertical image, it will be compressed. You can change it to show only part of it and hide the rest.
4. The jcarousellite plug-in is used to slide the thumbnail list. If the slides are extracted as plug-ins, they need to be integrated into one.
5. At present, the large image area and the thumbnail area are relatively independent. The advantage is that it is relatively intuitive and you can change the display position at will. The disadvantage is that the amount of HTML code is large, unlike some plug-ins, which only require $("# ID") and that's it.
JS code

Copy code The code is as follows:

< ;script type="text/javascript">
var currentImage;
var currentIndex = -1;
//Display the large image (the parameter index starts counting from 0)
function showImage(index) {
//Update the current picture page number
$(".CounterCurrent").html(index 1);
//Hide or show left and right mouse gestures
var len = $(' #OriginalPic img').length;
if (index == len - 1) {
$("#aNext").hide();
}
else {
$( "#aNext").show();
}
if (index == 0) {
$("#aPrev").hide();
}
else {
$("#aPrev").show();
}
//Show large image
if (index < $('#OriginalPic img').length) {
var indexImage = $('#OriginalPic p')[index];
//Hide the current image
if (currentImage) {
if (currentImage != indexImage) {
$(currentImage). css('z-index', 2);
$(currentImage).fadeOut(0, function () {
$(this).css({ 'display': 'none', 'z-index ': 1 })
});
}
}
//Display the image selected by the user
$(indexImage).show().css({ 'opacity': 0.4 } );
$(indexImage).animate({ opacity: 1 }, { duration: 200 });
//Update variables
currentImage = indexImage;
currentIndex = index;
/ /Remove and add highlight
$('#ThumbPic img').removeClass('active');
$($('#ThumbPic img')[index]).addClass('active') ;
//Set the height of the left and right mouse gesture area
//var tempHeight = $($('#OriginalPic img')[index]).height();
//$( '#aPrev').height(tempHeight);
//$('#aNext').height(tempHeight);
}
}
//Next
function ShowNext () {
var len = $('#OriginalPic img').length;
var next = currentIndex < (len - 1) ? currentIndex 1 : 0;
showImage(next);
}
//Previous picture
function ShowPrep() {
var len = $('#OriginalPic img').length;
var next = currentIndex == 0 ? (len - 1 ) : currentIndex - 1;
showImage(next);
}
//Next event
$("#aNext").click(function () {
ShowNext() ;
if ($(".active").position().left >= 144 * 5) {
$("#btnNext").click();
}
} );
//Previous event
$("#aPrev").click(function () {
ShowPrep();
if ($(".active").position( ).left <= 144 * 5) {
$("#btnPrev").click();
}
});
//Initialization event
$(". OriginalPicBorder").ready(function () {
ShowNext();
//Bind thumbnail click event
$('#ThumbPic li').bind('click', function (e) {
var count = $(this).attr('rel');
showImage(parseInt(count) - 1);
});
});

Online demo:http://demo.jb51.net/js/2011/Gallery/index.html
Package download:/201102 /yuanma/Gallery_jb51.rar