2014-09-21 72 views
-1

我做了一個滑塊與兩個圖像,我得到它在一定的秒數後改變,但我希望它返回到原始圖像後,而不僅僅是停止。試圖讓圖像滑塊循環

的jsfiddle - http://jsfiddle.net/bsu31hso/4/

<article> 
     <div class="slider"> 
     <img id="pic1" src="images/main-banner.png" alt="main banner" class="main_banner"> 
     <img id="pic2" src="images/nutrition-banner.png" alt="nutrition banner" class="main_banner "> 
     </div> 
</article> 




<script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#pic1").show(function(){ 
      $("#pic1").fadeOut(5000); 
      $("#pic2").fadeIn(); 

     }); 

    }); 
</script> 
+0

是圖像的NUM固定的嗎? – 2014-09-21 18:43:47

+0

爲什麼不使用已經存在的滑塊插件,如https://github.com/stevenwanderski/bxslider-4 – 2014-09-21 18:48:27

+0

你可以使用兩個函數並連續循環它們(如果圖像的數量是固定的) – 2014-09-21 18:49:15

回答

1

幾點:

1)你的所作所爲是不是一個滑塊..不與定義去

,如果你想一個滑塊用戶jQuery animate()與水平滑動

2)幻燈片圖像我們ÈsetInterval()具有期望的時間間隔

3)一種鹼性的方式是使用圓形陣列,繼續在相同的值超過且橫穿過再次

4)使用is(":visible")檢查包含的各圖像的ID每個陣列元素上這將有助於檢測它是否可見,並且從那時起已經選擇了時間,然後增加下一個圖像的數組索引以便通過滑動使用animate()

希望你明白!

在這裏,我已經做了代碼,您

DEMO