我刚开始使用jQuery并开始使用幻灯片库教程：http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/
最新版本的幻灯片添加了自动推进每张幻灯片的代码，但是当它到达结尾时，它会“倒退”到第一张幻灯片而不是简单地前进。我认为这与使用定位和“动画”有关，但我似乎无法解决这个问题。
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Traverse through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#nav ul li a').click(function(e,keepScroll){
/* On a thumbnail click */
$('li.navItem').removeClass('active').addClass('over');
$(this).parent().addClass('active');
var pos = $(this).parent().prevAll('.navItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);
});
$('#nav ul li.navItem:first').addClass('active').siblings().addClass('over');
/* On page load, mark the first thumbnail as active */
/*****
*
* Enabling auto-advance.
*
****/
var current=1;
function autoAdvance()
{
if(current==-1) return false;
$('#nav ul li a').eq(current%$('#nav ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 5;
var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
});