html - JQuery/HTML/CSS 灰度到彩色图像 slider

Question

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

我一直在使用适合过渡的图像渐变器，但想针对灰度特性对其进行修改。作为 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>

希望有人能帮助我! :-)

Answer 1

一种简单的方法是将图像的灰度版本插入到幻灯片中:

<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 过滤器的组合:http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html(忽略说代码是 PHP 的标签。它是 Javascript。这些标签可能是旧 CMS 遗留下来的。)

您必须扩展它来为灰度和颜色之间的每一步设置动画，所以只要您不处理大量图像，第一种方法是最简单的。