Jquery 将全屏画廊导航更改为项目符号导航
我不擅长修改jQuery，并且已经成功地完成了一段奇怪的简单代码，但是修改这个库对我来说是一个更大的任务：-它目前使用一个next/prev按钮和一个数字计数器，例如1/3、2/3等 我需要简单地将数字计数器更改为子弹计数器，如滑块上所示 我修改了jquery并尝试了一些东西，但变化可能比我预期的要大得多。有什么提示或提示让我走吗 以下是实际的JS：Jquery 将全屏画廊导航更改为项目符号导航,jquery,navigation,gallery,Jquery,Navigation,Gallery,我不擅长修改jQuery，并且已经成功地完成了一段奇怪的简单代码，但是修改这个库对我来说是一个更大的任务：-它目前使用一个next/prev按钮和一个数字计数器，例如1/3、2/3等 我需要简单地将数字计数器更改为子弹计数器，如滑块上所示 我修改了jquery并尝试了一些东西，但变化可能比我预期的要大得多。有什么提示或提示让我走吗 以下是实际的JS： (function($){ //Add in Supersized elements $(document).ready(function()
(function($){
//Add in Supersized elements
$(document).ready(function() {
$('body').prepend('<div id="supersized-loader"></div>').prepend('<div id="supersized"></div>');
});
//Resize image on ready or resize
$.supersized = function( options ) {
//Default settings
var settings = {
//Functionality
slideshow : 1, //Slideshow on/off
autoplay : 1, //Slideshow starts playing automatically
start_slide : 1, //Start slide (0 is random)
slide_interval : 5000, //Length between transitions
transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 750, //Speed of transition
new_window : 1, //Image links open in new window/tab
pause_hover : 0, //Pause slideshow on hover
keyboard_nav : 1, //Keyboard navigation on/off
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, //Disables image dragging and right click with Javascript
image_path : 'img/', //Default image path
//Size & Position
min_width : 0, //Min width allowed (in pixels)
min_height : 0, //Min height allowed (in pixels)
vertical_center : 1, //Vertically center background
horizontal_center : 1, //Horizontally center background
fit_portrait : 0, //Portrait images will not exceed browser height
fit_landscape : 0, //Landscape images will not exceed browser width
//Components
navigation : 1, //Slideshow controls on/off
thumbnail_navigation : 0, //Thumbnail navigation
slide_counter : 1, //Display slide numbers
slide_captions : 1 //Slide caption (Pull from "title" in slides array)
};
//Default elements
var element = $('#supersized'); //Supersized container
var pauseplay = '#pauseplay'; //Pause/Play
//Combine options with default settings
if (options) {
var options = $.extend(settings, options); //Pull from both defaults and supplied options
}else{
var options = $.extend(settings); //Only pull from default settings
}
//General slideshow variables
var inAnimation = false; //Prevents animations from stacking
var isPaused = false; //Tracks paused on/off
var image_path = options.image_path; //Default image path for navigation control buttons
//Determine starting slide (random or defined)
if (options.start_slide){
var currentSlide = options.start_slide - 1; //Default to defined start slide
}else{
var currentSlide = Math.floor(Math.random()*options.slides.length); //Generate random slide number
}
//If links should open in new window
var linkTarget = options.new_window ? ' target="_blank"' : '';
//Set slideshow quality (Supported only in FF and IE, no Webkit)
if (options.performance == 3){
element.addClass('speed'); //Faster transitions
} else if ((options.performance == 1) || (options.performance == 2)){
element.addClass('quality'); //Higher image quality
}
/***Load initial set of images***/
if (options.slides.length > 1){
//Set previous image
currentSlide - 1 < 0 ? loadPrev = options.slides.length - 1 : loadPrev = currentSlide - 1; //If slide is 1, load last slide as previous
var imageLink = (options.slides[loadPrev].url) ? "href='" + options.slides[loadPrev].url + "'" : "";
$("<img/>").attr("src", options.slides[loadPrev].image).appendTo(element).wrap('<a ' + imageLink + linkTarget + '></a>');
}
//Set current image
imageLink = (options.slides[currentSlide].url) ? "href='" + options.slides[currentSlide].url + "'" : "";
$("<img/>").attr("src", options.slides[currentSlide].image).appendTo(element).wrap('<a class="activeslide" ' + imageLink + linkTarget + '></a>');
if (options.slides.length > 1){
//Set next image
currentSlide == options.slides.length - 1 ? loadNext = 0 : loadNext = currentSlide + 1; //If slide is last, load first slide as next
imageLink = (options.slides[loadNext].url) ? "href='" + options.slides[loadNext].url + "'" : "";
$("<img/>").attr("src", options.slides[loadNext].image).appendTo(element).wrap('<a ' + imageLink + linkTarget + '></a>');
}
/***End load initial images***/
element.hide(); //Hide image to be faded in
$('#controls-wrapper').hide(); //Hide controls to be displayed
$(window).load(function(){
$('#supersized-loader').hide(); //Hide loading animation
element.fadeIn('fast'); //Fade in background
$('#controls-wrapper').show(); //Display controls
//Display thumbnails
if (options.thumbnail_navigation){
//Load previous thumbnail
currentSlide - 1 < 0 ? prevThumb = options.slides.length - 1 : prevThumb = currentSlide - 1;
$('#prevthumb').show().html($("<img/>").attr("src", options.slides[prevThumb].image));
//Load next thumbnail
currentSlide == options.slides.length - 1 ? nextThumb = 0 : nextThumb = currentSlide + 1;
$('#nextthumb').show().html($("<img/>").attr("src", options.slides[nextThumb].image));
}
resizenow(); //Resize background image
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title); //Pull caption from array
if (!(options.navigation)) $('#navigation').hide(); //Display navigation
//Start slideshow if enabled
if (options.slideshow && options.slides.length > 1){
if (options.slide_counter){ //Initiate slide counter if active
$('#slidecounter .slidenumber').html(currentSlide + 1); //Pull initial slide number from options
$('#slidecounter .totalslides').html(options.slides.length); //Pull total from length of array
}
slideshow_interval = setInterval(nextslide, options.slide_interval); //Initiate slide interval
//Prevent slideshow if autoplay disabled
if (!(options.autoplay)){
clearInterval(slideshow_interval); //Stop slideshow
isPaused = true; //Mark as paused
if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png"); //If pause play button is image, swap src
}
//Thumbnail Navigation
if (options.thumbnail_navigation){
//Next thumbnail clicked
$('#nextthumb').click(function() {
if(inAnimation) return false; //Abort if currently animating
clearInterval(slideshow_interval); //Stop slideshow
nextslide(element, options); //Go to next slide
if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow
return false;
});
//Previous thumbnail clicked
$('#prevthumb').click(function() {
if(inAnimation) return false; //Abort if currently animating
clearInterval(slideshow_interval); //Stop slideshow
prevslide(element, options); //Go to previous slide
if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow
return false;
});
}
//Navigation controls
if (options.navigation){
$('#navigation a').click(function(){
$(this).blur();
return false;
});
//Next button clicked
$('#nextslide').click(function() {
if(inAnimation) return false; //Abort if currently animating
clearInterval(slideshow_interval); //Stop slideshow
nextslide(); //Go to next slide
if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow
return false;
});
//If next slide button is image
if ($('#nextslide').attr('src')){
$('#nextslide').mousedown(function() {
$(this).attr("src", image_path + "arrow_right_active.png");
});
$('#nextslide').mouseup(function() {
$(this).attr("src", image_path + "arrow_right_inactive.png");
});
$('#nextslide').mouseout(function() {
$(this).attr("src", image_path + "arrow_right_inactive.png");
});
}
//Previous button clicked
$('#prevslide').click(function() {
if(inAnimation) return false; //Abort if currently animating
clearInterval(slideshow_interval); //Stop slideshow
prevslide(); //Go to previous slide
if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow
return false;
});
//If previous slide button is image
if ($('#prevslide').attr('src')){
$('#prevslide').mousedown(function() {
$(this).attr("src", image_path + "arrow_left_active.png");
});
$('#prevslide').mouseup(function() {
$(this).attr("src", image_path + "arrow_left_inactive.png");
});
$('#prevslide').mouseout(function() {
$(this).attr("src", image_path + "arrow_left_inactive.png");
});
}
//Pause/play element clicked
$(pauseplay).click(function() {
if(inAnimation) return false; //Abort if currently animating
if (isPaused){
if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png"); //If image, swap to pause
//Resume slideshow
isPaused = false;
slideshow_interval = setInterval(nextslide, options.slide_interval);
}else{
if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png"); //If image, swap to play
//Stop slideshow
clearInterval(slideshow_interval);
isPaused = true;
}
return false;
});
} //End navigation controls
} //End slideshow options
}); //End window load
//Keyboard Navigation
if (options.keyboard_nav){
$(document.documentElement).keydown(function (event) {
if ((event.keyCode == 37) || (event.keyCode == 40)) { //Left Arrow or Down Arrow
if ($('#prevslide').attr('src')) $('#prevslide').attr("src", image_path + "arrow_left_active.png"); //If image, change back button to active
} else if ((event.keyCode == 39) || (event.keyCode == 38)) { //Right Arrow or Up Arrow
if ($('#nextslide').attr('src')) $('#nextslide').attr("src", image_path + "arrow_right_active.png"); //If image, change next button to active
}
});
$(document.documentElement).keyup(function (event) {
clearInterval(slideshow_interval); //Stop slideshow, prevent buildup
if ((event.keyCode == 37) || (event.keyCode == 40)) { //Left Arrow or Down Arrow
if ($('#prevslide').attr('src')) $('#prevslide').attr("src", image_path + "arrow_left_inactive.png"); //If image, change back button to normal
if(inAnimation) return false; //Abort if currently animating
clearInterval(slideshow_interval); //Stop slideshow
prevslide(); //Go to previous slide
if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow
return false;
} else if ((event.keyCode == 39) || (event.keyCode == 38)) { //Right Arrow or Up Arrow
if ($('#nextslide').attr('src')) $('#nextslide').attr("src", image_path + "arrow_right_inactive.png"); //If image, change next button to normal
if(inAnimation) return false; //Abort if currently animating
clearInterval(slideshow_interval); //Stop slideshow
nextslide(); //Go to next slide
if(!(isPaused)) slideshow_interval = setInterval(nextslide, options.slide_interval); //If not paused, resume slideshow
return false;
} else if (event.keyCode == 32) { //Spacebar
if(inAnimation) return false; //Abort if currently animating
if (isPaused){
if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png"); //If image, swap to pause
//Resume slideshow
isPaused = false;
slideshow_interval = setInterval(nextslide, options.slide_interval);
}else{
if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "play_dull.png"); //If image, swap to play
//Mark as paused
isPaused = true;
}
return false;
}
});
}
//Pause when hover on image
if (options.slideshow && options.pause_hover){
$(element).hover(function() {
if(inAnimation) return false; //Abort if currently animating
if(!(isPaused) && options.navigation){
if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause.png"); //If image, swap to pause
clearInterval(slideshow_interval);
}
}, function() {
if(!(isPaused) && options.navigation){
if ($(pauseplay).attr('src')) $(pauseplay).attr("src", image_path + "pause_dull.png"); //If image, swap to active
slideshow_interval = setInterval(nextslide, options.slide_interval);
}
});
}
//Adjust image when browser is resized
$(window).resize(function(){
resizenow();
});
//Adjust image size
function resizenow() {
return element.each(function() {
var t = $('img', element);
//Resize each image seperately
$(t).each(function(){
var ratio = ($(this).height()/$(this).width()).toFixed(2); //Define image ratio
//Gather browser size
var browserwidth = $(window).width();
var browserheight = $(window).height();
var offset;
//Resize image to proper ratio
if ((browserheight > options.min_height) || (browserwidth > options.min_width)){ //If window larger than minimum height or width
if ((browserheight/browserwidth) > ratio){
if (options.fit_landscape && ratio <= 1){ //If landscapes are set to fit
$(this).width(browserwidth);
$(this).height(browserwidth * ratio);
}else{ //Otherwise handle normally
$(this).height(browserheight);
$(this).width(browserheight / ratio);
}
} else {
if (options.fit_portrait && ratio > 1){ //If portraits are set to fit
$(this).height(browserheight);
$(this).width(browserheight / ratio);
}else{ //Otherwise handle normally
$(this).width(browserwidth);
$(this).height(browserwidth * ratio);
}
} //End dynamic resizing
} //End minimum size check
//Horizontally Center
if (options.horizontal_center){
$(this).css('left', (browserwidth - $(this).width())/2);
}
//Vertically Center
if (options.vertical_center){
$(this).css('top', (browserheight - $(this).height())/2);
}
});
//Basic image drag and right click protection
if (options.image_protect){
$('img', element).bind("contextmenu",function(){
return false;
});
$('img', element).bind("mousedown",function(){
return false;
});
}
return false;
});
};
//Next slide
function nextslide() {
if(inAnimation) return false; //Abort if currently animating
else inAnimation = true; //Otherwise set animation marker
var slides = options.slides; //Pull in slides array
var currentslide = element.find('.activeslide'); //Find active slide
currentslide.removeClass('activeslide'); //Remove active class
if ( currentslide.length == 0 ) currentslide = element.find('a:last'); //If end of set, note this is last slide
var nextslide = currentslide.next().length ? currentslide.next() : element.find('a:first');
var prevslide = nextslide.prev().length ? nextslide.prev() : element.find('a:last');
//Update previous slide
$('.prevslide').removeClass('prevslide');
prevslide.addClass('prevslide');
//Get the slide number of new slide
currentSlide + 1 == slides.length ? currentSlide = 0 : currentSlide++;
//If hybrid mode is on drop quality for transition
if (options.performance == 1) element.removeClass('quality').addClass('speed');
/**** Image Loading ****/
//Load next image
loadSlide = false;
currentSlide == slides.length - 1 ? loadSlide = 0 : loadSlide = currentSlide + 1; //Determine next slide
imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : ""; //If link exists, build it
$("<img/>").attr("src", options.slides[loadSlide].image).appendTo(element).wrap("<a " + imageLink + linkTarget + "></a>"); //Append new image
//Update thumbnails (if enabled)
if (options.thumbnail_navigation == 1){
//Load previous thumbnail
currentSlide - 1 < 0 ? prevThumb = slides.length - 1 : prevThumb = currentSlide - 1;
$('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
//Load next thumbnail
nextThumb = loadSlide;
$('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
}
currentslide.prev().remove(); //Remove Old Image
/**** End Image Loading ****/
//Update slide number
if (options.slide_counter){
$('#slidecounter .slidenumber').html(currentSlide + 1);
}
//Update captions
if (options.slide_captions){
(options.slides[currentSlide].title) ? $('#slidecaption').html(options.slides[currentSlide].title) : $('#slidecaption').html('');
}
nextslide.hide().addClass('activeslide'); //Update active slide
switch(options.transition){
case 0: //No transition
nextslide.show(); inAnimation = false;
break;
case 1: //Fade
nextslide.fadeTo(options.transition_speed, 1, function(){ afterAnimation(); });
break;
case 2: //Slide Top
nextslide.animate({top : -$(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
break;
case 3: //Slide Right
nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
break;
case 4: //Slide Bottom
nextslide.animate({top : $(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
break;
case 5: //Slide Left
nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
break;
case 6: //Carousel Right
nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
currentslide.animate({ left: -$(window).width() }, options.transition_speed );
break;
case 7: //Carousel Left
nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
currentslide.animate({ left: $(window).width() }, options.transition_speed );
break;
};
}
//Previous Slide
function prevslide() {
if(inAnimation) return false; //Abort if currently animating
else inAnimation = true; //Otherwise set animation marker
var slides = options.slides; //Pull in slides array
var currentslide = element.find('.activeslide'); //Find active slide
currentslide.removeClass('activeslide'); //Remove active class
if ( currentslide.length == 0 ) currentslide = $(element).find('a:first'); //If end of set, note this is first slide
var nextslide = currentslide.prev().length ? currentslide.prev() : $(element).find('a:last');
var prevslide = nextslide.next().length ? nextslide.next() : $(element).find('a:first');
//Update previous slide
$('.prevslide').removeClass('prevslide');
prevslide.addClass('prevslide');
//Get current slide number
currentSlide == 0 ? currentSlide = slides.length - 1 : currentSlide-- ;
//If hybrid mode is on drop quality for transition
if (options.performance == 1) element.removeClass('quality').addClass('speed');
/**** Image Loading ****/
//Load next image
loadSlide = false;
currentSlide - 1 < 0 ? loadSlide = slides.length - 1 : loadSlide = currentSlide - 1; //Determine next slide
imageLink = (options.slides[loadSlide].url) ? "href='" + options.slides[loadSlide].url + "'" : ""; //If link exists, build it
$("<img/>").attr("src", options.slides[loadSlide].image).prependTo(element).wrap("<a " + imageLink + linkTarget + "></a>"); //Append new image
//Update thumbnails (if enabled)
if (options.thumbnail_navigation == 1){
//Load previous thumbnail
prevThumb = loadSlide;
$('#prevthumb').html($("<img/>").attr("src", options.slides[prevThumb].image));
//Load next thumbnail
currentSlide == slides.length - 1 ? nextThumb = 0 : nextThumb = currentSlide + 1;
$('#nextthumb').html($("<img/>").attr("src", options.slides[nextThumb].image));
}
currentslide.next().remove(); //Remove Old Image
/**** End Image Loading ****/
//Update slide counter
if (options.slide_counter){
$('#slidecounter .slidenumber').html(currentSlide + 1);
}
//Update captions
if (options.slide_captions){
(options.slides[currentSlide].title) ? $('#slidecaption').html(options.slides[currentSlide].title) : $('#slidecaption').html('');
}
nextslide.hide().addClass('activeslide'); //Update active slide
switch(options.transition){
case 0: //No transition
nextslide.show(); inAnimation = false;
break;
case 1: //Fade
nextslide.fadeTo(options.transition_speed, 1, function(){ afterAnimation(); });
break;
case 2: //Slide Top (reverse)
nextslide.animate({top : $(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
break;
case 3: //Slide Right (reverse)
nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
break;
case 4: //Slide Bottom (reverse)
nextslide.animate({top : -$(window).height()}, 0 ).show().animate({ top:0 }, options.transition_speed, function(){ afterAnimation(); });
break;
case 5: //Slide Left (reverse)
nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
break;
case 6: //Carousel Right (reverse)
nextslide.animate({left : -$(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
currentslide.animate({ left: $(window).width() }, options.transition_speed );
break;
case 7: //Carousel Left (reverse)
nextslide.animate({left : $(window).width()}, 0 ).show().animate({ left:0 }, options.transition_speed, function(){ afterAnimation(); });
currentslide.animate({ left: -$(window).width() }, options.transition_speed );
break;
};
}
//After slide animation
function afterAnimation() {
inAnimation = false;
//If hybrid mode is on swap back to higher image quality
if (options.performance == 1){
element.removeClass('speed').addClass('quality');
}
resizenow();
}
};
})(jQuery);
（函数（$）{
//外接程序超大型元素
$（文档）.ready（函数（）{
$（'body'）.prepend（''）.prepend（''）；
});
//准备就绪时调整图像大小或调整大小
$.supersized=函数（选项）{
//默认设置
变量设置={
//功能性
幻灯片放映：1，//幻灯片放映打开/关闭
自动播放：1，//幻灯片自动开始播放
开始幻灯片：1，//开始幻灯片（0是随机的）
滑动间隔：5000，//过渡之间的长度
转换：1、//0-无、1-淡入、2-顶部滑动、3-右侧滑动、4-底部滑动、5-左侧滑动、6-右侧旋转木马、7-左侧旋转木马
过渡速度：750，//过渡速度
新建窗口：1，//在新窗口/选项卡中打开图像链接
暂停\悬停：0，//悬停时暂停幻灯片放映
键盘导航：1，//键盘导航打开/关闭
性能：1、//0-正常，1-混合速度/质量，2-优化图像质量，3-优化转换速度//（仅适用于Firefox/IE，不适用于Webkit）
image\u protect:1，//禁用图像拖动并使用Javascript右键单击
图像路径：“img/”，//默认图像路径
//大小和位置
最小宽度：0，//允许的最小宽度（以像素为单位）
最小高度：0，//允许的最小高度（以像素为单位）
垂直中心：1，//垂直中心背景
水平居中：1，//水平居中背景
fit_纵向：0，//纵向图像将不会超过浏览器高度
fit_横向：0，//横向图像将不会超过浏览器宽度
//组成部分
导航：1，//幻灯片显示控件打开/关闭
缩略图\u导航：0，//缩略图导航
幻灯片\计数器：1，//显示幻灯片编号
幻灯片标题：1//幻灯片标题（从幻灯片数组中的“标题”中提取）
};
//默认元素
var元素=$（“#超级大小”）；//超级大小的容器
var pauseplay='#pauseplay'；//暂停/播放
//将选项与默认设置相结合
如果（选项）{
var options=$.extend（设置，选项）；//从默认值和提供的选项中提取
}否则{
var options=$.extend（设置）；//仅从默认设置中提取
}
//通用幻灯片放映变量
var inAnimation=false；//防止动画堆叠
var isPaused=false；//轨道暂停开/关
var image\u path=options.image\u path；//导航控制按钮的默认图像路径
//确定起始幻灯片（随机或定义）
如果（选项。开始\u幻灯片）{
var currentSlide=options.start\u slide-1；//默认为定义的开始幻灯片
}否则{
var currentSlide=Math.floor（Math.random（）*options.slides.length）；//生成随机幻灯片编号
}
//如果链接应该在新窗口中打开
var linkTarget=options.new_窗口？'target=“_blank”：”；
//设置幻灯片质量（仅在FF和IE中支持，无Webkit）
如果（options.performance==3）{
element.addClass（'speed'）；//更快的转换
}如果（（options.performance==1）| |（options.performance==2））{
element.addClass（'quality'）；//更高的图像质量
}
/***加载初始图像集***/
如果（options.slides.length>1）{
//设置上一个图像
currentSlide-1<0？loadPrev=options.slides.length-1:loadPrev=currentSlide-1；//如果slide为1，则按上一张加载最后一张幻灯片
var imageLink=（options.slides[loadPrev].url）？“href=”+options.slides[loadPrev].url+“：”；
$(" 1){
//设置下一个图像
currentSlide==options.slides.length-1？loadNext=0:loadNext=currentSlide+1；//如果幻灯片是最后一张，则将第一张幻灯片作为下一张加载
imageLink=（options.slides[loadNext].url）？“href=”+options.slides[loadNext].url+“：”；
$（“”）.attr（“src”，options.slides[prevThumb].image））；
//加载下一个缩略图
nextThumb=负载滑动；
$（'#nextthumb'）.html（$（“”）.attr（“src”，options.slides[loadSlide].image）.prependTo（元素）.wrap（“”；//追加新图像
//更新缩略图（如果启用）
if（options.缩略图_导航==1）{
//加载上一个缩略图
prevThumb=负载滑动；
$（'#prevthumb'）.html（$（“”）.attr（“src”，options.slides[nextThumb].image））；
}
currentslide.next（）.remove（）；//删除旧图像
/****结束图像加载****/
//更新幻灯片计数器
如果（选项。滑动计数器）{
$（'#slidecounter.slidenumber'）.html（当前幻灯片+1）；
}
//更新字幕
如果（选项。幻灯片标题）{
（options.slides[currentSlide].title）？$（'slidecaption'）.html（options.slides[currentSlide].title）：$（'slidecaption'）.html（''）；
}
nextslide.hide（）.addClass（'activeslide'）；//更新活动幻灯片
开关（选项.转换）{
案例0://无过渡
nextslide.show（）；无生命=false；
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/supersized.3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
//Functionality
slideshow : 1, //Slideshow on/off
autoplay : 1, //Slideshow starts playing automatically
start_slide : 1, //Start slide
slide_interval : 3000, //Length between transitions
transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 500, //Speed of transition
new_window : 1, //Image links open in new window/tab
pause_hover : 0, //Pause slideshow on hover
keyboard_nav : 1, //Keyboard navigation on/off
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
//Size & Position
min_width : 0, //Min width allowed (in pixels)
min_height : 0, //Min height allowed (in pixels)
vertical_center : 1, //Vertically center background
horizontal_center : 1, //Horizontally center background
fit_portrait : 1, //Portrait images will not exceed browser height
fit_landscape : 0, //Landscape images will not exceed browser width
//Components
navigation : 1, //Slideshow controls on/off
thumbnail_navigation : 1, //Thumbnail navigation
slide_counter : 1, //Display slide numbers
slide_captions : 1, //Slide caption (Pull from "title" in slides array)
slides : [ //Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/quietchaos-kitty.jpg', title : 'Quiet Chaos by Kitty Gallannaugh', url : 'http://www.nonsensesociety.com/2010/12/kitty-gallannaugh/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/day3-emily.jpg', title : 'Day 3 by Emily Tebbetts', url : 'http://www.nonsensesociety.com/2011/02/larissa/'},
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.1/slides/wilderness2.jpg', title : 'Wilderness by Larissa Felsen', url : 'http://www.nonsensesociety.com/2011/02/larissa/'}
]
});
});
</script>
<!--Thumbnail Navigation-->
<div id="prevthumb"></div> <div id="nextthumb"></div>
<!--Control Bar-->
<div id="controls-wrapper">
<div id="controls">
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span>/<span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Navigation-->
<div id="navigation">
<img id="prevslide" src="img/back_dull.png"/><img id="pauseplay" src="img/pause_dull.png"/><img id="nextslide" src="img/forward_dull.png"/>
</div>
</div>
</div>