JQuery/HTML/CSS灰度到彩色图像滑块

我希望这里有人能帮我。我目前正在为一个客户建立一个网站，在索引页面上将有一个图像滑块/音量控制器，它将显示一系列图像。客户端要求的是从一个图像过渡到另一个图像，以便序列中的下一个图像以灰度淡入，并慢慢变为彩色，并在加载下一个图像之前暂停几秒钟

我一直在使用一个图像推子，它可以很好的过渡，但想修改它的灰度功能。作为jQuery的新手，互联网上似乎没有任何“现成的”，所以我有点挣扎

我的CSS如下所示：

.index_slideshow { position:relative; height:340px; width:980px; margin:auto; }
.index_slideshow IMG { position:absolute; top:0; left:0; z-index:8; }
.index_slideshow IMG.active { z-index:10; }
.index_slideshow IMG.last-active { z-index:9; } 

我的jQuery如下所示：

function slideSwitch() {
var $active = $('.index_slideshow IMG.active');

if ( $active.length == 0 ) $active = $('.index_slideshow IMG:last');
var $next =  $active.next().length ? $active.next()
    : $('.index_slideshow IMG:first');
$active.addClass('last-active');

$next.css({opacity: 0.0 })
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

我的HTML是：

<div class="index_slideshow" id="index_slideshow">
<img src="images/img2.jpg" alt="" />
<img src="images/img.jpg" alt="" />
</div>

---

希望有人能帮助我！：-）

一个简单的方法是在幻灯片中插入灰度版本的图像：

<div class="index_slideshow" id="index_slideshow">
<img src="images/img2.jpg" alt="" />
<img src="images/img2grey.jpg" alt="" />
<img src="images/img1.jpg" alt="" />
<img src="images/img1grey.jpg" alt="" />
</div>

（根据您的img顺序，我假设代码中显示较低的图像首先显示……但如果这是一个错误的假设，只需交换imgX.jpg和imgXgrey.jpg的位置。）

除此之外，您还将看到Canvas元素和IE过滤器的组合： （忽略表示代码是PHP的标记。它是Javascript。这些标记可能是旧CMS遗留下来的。）

---

您必须扩展该方法，以便在灰度和颜色之间为每个步骤设置动画，因此，只要您不处理海量图像，第一种方法是最简单的。

您需要使用画布来完成此操作。这不是一个简单的CSS/JS问题。这可能会有帮助：看看这里，它使用CSS过滤器：