Question

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

我一直在使用一个适用于过渡的图像推子，但是想要为灰度功能修改它。是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的遗留物。）

您必须将其扩展为灰度和颜色之间的每一步的动画，因此只要您不处理大量图像，第一种方法就是最简单的方法。

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

1 个答案: