2

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

我一直在使用一个适用于过渡效果的图像推子，但想针对灰度功能对其进行修改。作为 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>

希望可以有人帮帮我！:-)

4

1 回答 1

0

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

<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 遗留下来的。）

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

于 2012-10-27T23:07:16.423 回答