jQuery幻灯片重启开始或结束

的jsfiddle

使用下面的代码我有一个jQuery内容幻灯片工作但下一个和前一个箭头在开始或最后一张幻灯片时消失，我希望幻灯片继续回到开始或最后一个取决于当前幻灯片，如果你理解我的意思。

jQuery的

var currentPosition = 0; var slideWidth = 560; var slides = $('.slide'); var numberOfSlides = slides.length; // Remove scrollbar in JS $('#slidesContainer').css('overflow', 'hidden'); // Wrap all .slides with #slideInner div slides.wrapAll('
') // Float left to display horizontally, readjust .slides width .css({ 'float' : 'left', 'width' : slideWidth }); // Set #slideInner width equal to total width of all slides $('#slideInner').css('width', slideWidth * numberOfSlides); // Insert controls in the DOM $('#slideshow') .prepend('Clicking moves left') .append('Clicking moves right'); // Hide left arrow control on first load manageControls(currentPosition); // Create event listeners for .controls clicks $('.control') .bind('click', function(){ // Determine new position currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; // Hide / show controls manageControls(currentPosition); // Move slideInner using margin-left $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); }); // manageControls: Hides and Shows controls depending on currentPosition function manageControls(position){ // Hide left arrow if position is first slide if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } // Hide right arrow if position is last slide if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } } 

Answer 1

您必须删除对函数manageControls的调用而不是行

 currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; 

使用代码

 if(($(this).attr('id')=='rightControl')) { if(currentPosition == numberOfSlides-1) currentPosition = 0; else currentPosition++; } else if($(this).attr('id')=='leftControl'){ if(currentPosition == 0) currentPosition = numberOfSlides-1; else currentPosition--; } 

请参阅http://jsfiddle.net/WTvsM/1/以获取小提琴的更新版本。