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" />