javascript/jquery：尋找圖像褪色腳本

Question

我正在尋找一個輕量級腳本（純JavaScript優先） - 它應該是順利淡入一個圖像序列（=圖像旋轉木馬）。 它應該也可以運行幾個實例（所以它應該是一個原型腳本）， 像例如： - 網站橫幅：褪色3個圖像在彼此之後 - 主要內容：3個畫廊，每個褪色3-5圖像

腳本用於此目的的任何建議？

謝謝！

Answer 1

我已經使用jQuery CrossSlide plugin，它運作良好。

Answer 2

您好我已經寫了一個簡單的腳本，利用jQuery .fadeOut（）和.fadeIn（）方法以及幾行html和css。使用編號爲1到n的圖像元素的id，算法可以輕鬆地遍歷圖像，並在到達最後一幅圖像時重新開始。它可以很容易地適應，使過渡發生一段時間後自動發生，而不是點擊按鈕。讓我知道這是否有幫助。代碼如下：

<style type="text/css"> 
     #images{ overflow:auto; } 
     .current{ display:inline; } 
     .hidden{ display:none; }    
</style> 

<script type="text/javascript" > 

    function doFade(current){ 

     var speed = 500; 
     next = $("#"+(parseInt(current.attr("id")) + 1)); 
     if(next.length <= 0) next = $("#1"); 
     current.fadeOut(speed, 
      function fadeNextIn(){ 
       current.attr("class", "hidden"); 
       next.fadeIn(speed, 
        function afterFadeNextIn(){ 
         next.attr("class","current"); 
        } 
       ); 
      } 
     ); 
    } 

    $(document).ready(
     function() { 
      $("#btnNext").click( 
       function(){ 
        doFade($("#images .current")); 
       } 
      ); 
     } 
    ); 

</script> 

<div id="images"> 

    <img id="1" title="image 1" alt="image 1" src="1.jpg" class="current" /> 
    <img id="2" title="image 2" alt="image 2" src="2.jpg" class="hidden" /> 
    <img id="3" title="image 3" alt="image 3" src="3.jpg" class="hidden"/> 
    <img id="4" title="image 4" alt="image 4" src="4.jpg" class="hidden"/> 

</div> 

<input id="btnNext" type="button" value="next" />