2014-05-14 59 views
-3

我有一些steps.like更改圖像自動

<li>Step1</li> 
<li>Step2</li> 
<li>Step3</li> 
<li>Step4</li> 
<li>Step5</li> 

而且在每一步我想展示自己的相關圖像。像我有另一格

<div><img src="step1"></div> 

我想要的步驟將突出一個接一個,我的形象會根據自動改變。任何想法。提前致謝。

我已經試過

$(document).ready(function() { 

    var $divs = $("div").show(), 
     current = 0; 

    $divs.eq(0).attr("style","color:red"); 

    function showNext() { 
     if (current < $divs.length - 1) { 
      $divs.eq(current).delay(2000).show('fast', function() { 

       current++; 
       $divs.eq(current).attr("style","color:red"); 
       showNext(); 
      }); 
     } 
    } 
    showNext(); 

}); 
+0

你應該拿出至少一個最小試。 –

+0

你做了什麼? –

+0

告訴我們你到目前爲止所做的一切..... SO是爲了幫助那些已經嘗試過並被困在中間的人.....它不是要求會員爲你編碼......請告訴我們你到目前爲止所嘗試過的,我們會樂意幫助你,並告訴你出錯的地方 – Vicky

回答

0
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
jQuery('li[id^="step"]').click(function(){ 
    var imagepath = jQuery(this).attr('dir'); 
    jQuery('#ImageDiv').find('img').attr('src',imagepath); 
}); 
}); 
</script> 
<style> 
li{ cusrsor:pointer; padding:10px; } 
</style> 

<li id="step1" dir="images1.jpg">Step1</li> 
<li id="step2" dir="images2.jpg">Step2</li> 
<li id="step3" dir="images3.jpg">Step3</li> 
<li id="step4" dir="images4.jpg">Step4</li> 
<li id="step5" dir="images5.jpg">Step5</li> 

<div id="ImageDiv"><img src="images1.jpg"></div> 
+0

感謝您的回覆。它適用於點擊。我想將計時器設置爲像第1步到第5步一樣的滑塊,然後再次從步驟1開始移動,並在懸停時停止移動。 – Puneet