2013-03-13 7 views
-1

이 이미지로 자동 슬라이드 쇼를 만들려고 시도 할 때마다 첫 번째 이미지에서 멈추게됩니다. http://jsfiddle.net/He9AV/5/자바 스크립트에서 자동 슬라이드 쇼를 만드는 방법

HTML :

<script type="text/javascript">  
     var hovering = false; 
     var slideshow = $("#slideshow"); 

     slideshow.mouseenter(function() { 
      hovering = true; 
     }).mouseleave(function() { 
      hovering = false; 
      slideShow(); 
     }); 
     function slideShow() { 
      if (!hovering) { 
       var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first"); 
       var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first"); 

       currentImg.delay(1000).fadeOut(500, function() { 
        nextImg.fadeIn(500, function() { 
         setTimeout(slideShow, 1000); 
        }); 
       }); 
      } 
     } 
     $(document).ready(function() { 
      slideShow(); 
     }); 
     </script> 
+2

"오류"를 정의하십시오 사이트에서 데모를 시도 할 수 있습니다. –

+1

그리고 코드를 피들에 넣어서 문제를 상상할 필요가 없습니다. :-) http://jsfiddle.net/ 저장하기 전에 TidyUp 버튼을 클릭하십시오. – isherwood

+0

문제 = "첫 번째 이미지에서 멈춤"@BradM – Jawad

답변

0

데모에 정의되지 않은 기능 cycle를 제거하고 잘 작동 : 오류가 발생하는 있지만 여기가
자바 스크립트입니다

<div id="slideshow"> 
    <a href="../images/food/e_chicken_quesa.jpg" target="_blank"><img class="show" src="../images/food/chicken_quesa.jpg" alt="Chicken Quesadilla" title="Chicken Quesadilla"></a> 
    <a href="../images/food/e_steak.jpg" target="_blank"><img src="../images/food/steak.jpg" alt="Beef Tenderloin" title="Beef Tenderloin"></a> 
    <a href="../images/food/e_pasta_display.jpg" target="_blank"><img src="../images/food/pasta_display.jpg" alt="Pasta Station" title="Pasta Station"></a> 
    <a href="../images/food/e_salmon.jpg" target="_blank"><img src="../images/food/salmon.jpg" alt="Salmon Filet" title="Salmon Filet"></a> 
    <a href="../images/food/e_panacotta.jpg" target="_blank"><img src="../images/food/panacotta.jpg" alt="Panacotta" title="Panacotta"></a> 
    <a href="../images/food/e_beet_salad.jpg" target="_blank"><img src="../images/food/beet_salad.jpg" alt="Beet Salad" title="Beet Salad"></a> 
    <a href="../images/food/e_tuna.jpg" target="_blank"><img src="../images/food/tuna.jpg" alt="Seared Tuna" title="Seared Tuna"></a> 
    <a href="../images/food/e_foi_gras.jpg" target="_blank"><img src="../images/food/foi_gras.jpg" alt="Foi Gras" title="Foi Gras"></a> 
</div> 

임은 확실하지 - 바이올린에 포함시킬 JS 라이브러리를 선택하지 않았습니다. 여전히 작동하지 않는 경우 - 어떤 브라우저를 사용하고 있습니까?

updated

+0

모든 브라우저에서 시도했습니다. 그것은 첫 번째 이미지에 앉아있다 –

+0

@ GarrettJohnson 나는 당신의 브라우저/버전 친구를 알지 못하면서 무엇을 제안해야할지 모르겠다. [this] (http://jsfiddle.net/He9AV/6/) 버전은 Chrome & Firefox에서 제대로 작동합니다. 노트북 ATM에 다른 브라우저가 없지만 코드에 대해 복잡한 것은 없습니다. 왜 작동하지 않을지 알지 못합니다. – Emissary

+0

좋습니다! 그 링크가 나를 위해 일하고 있었다, idk 당신이 바꾼 것 –

관련 문제