jQuery 슬라이드 쇼 및 이미지 회전 문제

Question

내 div에서 한 번에 하나씩 이미지를 표시하는 코드를 작성했습니다. 내 코드가 작동하지만 문제는 마지막 이미지에 도달하면 다음 이미지가 다시 첫 번째 이미지가 될 때입니다. 내 경우 슬라이드 쇼는 마지막 이미지에서 멈 춥니 다. 내 div가 네 개의 이미지를 가지고 있다고 가정합니다. 테스트 할 때 한 번에 하나의 이미지 만 표시되지만 마지막 이미지에 도달하면 슬라이드 쇼가 중지됩니다. 다음 이미지가 보이지 않는다는 뜻입니다. 첫 번째 이미지는 다음 이미지로 표시되어야합니다.

여기에서 전체 코드를 게시합니다. 누군가 제발 좀보고 코드의 문제가 무엇인지 말해 주시고 가능한 경우 수정하십시오.

내 구현 URL http://jsfiddle.net/tridip/jwxzv/

$(document).ready(function() { 
    slideShow(); 
}); 

function slideShow() { 
    $('#gallery img').css({ opacity: 0.0 }); 
    $('#gallery img:first').css({ opacity: 1.0 }); 
    setInterval('gallery()', 2000); 
} 

function gallery() { 
    var current = ($('#gallery .show') ? $('#gallery .show') : $('#gallery img').first()); 
    var next = (current.next().length > 0 ? current.next() : $('#gallery img').first()); 
    next.css({ opacity: 0.0 }) 
    .addClass('show') 
    .animate({ opacity: 1.0 }, 1000); 
    current.animate({ opacity: 0.0 }, 1000).removeClass('show'); 
} 

<style type="text/css"> 

.clear { 
clear:both 
} 

#gallery { 
    position:relative; 
    height:360px 
} 
#gallery img { 
    float:left; 
    position:absolute; 
} 

#gallery img { 
    border:none; 
} 

#gallery show { 
    z-index:500 
} 

</style> 

<div id="gallery"> 
<img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" class="show" /> 
<img src="images/grass-blades.jpg" alt="Grass Blades" width="580" height="360" title="" alt="" /> 
<img src="images/ladybug.jpg" alt="Ladybug" width="580" height="360" title="" alt="" /> 
<img src="images/lightning.jpg" alt="Lightning" width="580" height="360" title="" alt="" /> 
</div> 

Answer 1

코드를 수정한다 http://jsfiddle.net/jwxzv/3/

Answer 2

문제 발견. 이 코드 행 ....

var next = ((current.next().length) ? ... 

이

var next = ((current.next().length > 0) ? ... 

작업 예되어야한다 : http://jsfiddle.net/jwxzv/4/

---

또한, 당신의 JS와 CSS는하지 않고, 좋은 거래를 단순화 할 수있다 클래스 show 걱정. 위의 문제도 해결됩니다.

근무 샘플 : http://jsfiddle.net/jwxzv/11/

CSS

.clear { 
    clear:both 
} 
#gallery { 
    position:relative; 
    height:360px 
} 
#gallery img { 
    float:left; 
    position:absolute; 
    display:none; 
    border:none;  
    z-index:500 
} 

JS 여기

$(document).ready(function() { 
    slideShow(); 
}); 

function slideShow() { 
    $('#gallery img').hide(); 
    $('#gallery img:first').fadeIn('fast') 
    setInterval('gallery()', 2000); 
} 

function gallery() { 
    var current = $('#gallery img:visible'); 
    var next = current.next('#gallery img'); 
    if (next.length==0) next = $('#gallery img:first') 
    current.fadeOut('medium'); 
    next.fadeIn('medium'); 
}