JQuery / HTML / CSS灰度到彩色图像滑块 [英] JQuery / HTML / CSS Grayscale to color image slider

问题描述

我希望有人在这里可以帮助我。我目前正在为客户端构建一个网站，在索引页上将是一个图像滑块/推子，将显示一系列的图像。客户要求的是在从一个图像到另一个图像的转换中，序列中的下一个图像以灰度渐变的形式渐渐变成颜色并且暂停几秒钟，然后加载到下一个图像中。

Im hoping somebody on here can help me. I am currently building a website for a client and on the index page will be an image slider/fader that will display a sequence of images. What the client has asked for is for on the transition from one image to another for the next image in the sequence to fade in as grayscale and slowly turn to color and the pause for a few seconds before loading in the next image.

我一直在使用一个图像推子，对于过渡效果很好，但想要修改它的灰度特征。作为新的jQuery，并没有看起来在互联网上任何'现成的'，所以我努力一点。

I have been using an image fader that works fine for the transition but would like to modify it for the grayscale feature. Being new to jQuery and there doesn't appear to be any 'ready built' on the internet so i'm struggling a bit.

我的CSS是一个以下： / p>

My CSS is a follows:

.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如下：

My jQuery is as follows:

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>

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

Hope some one can help me! :-)

推荐答案

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

A simple way to do it would be to insert greyscale versions of the images into the slideshow:

<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的位置，如果这是一个不正确的假设。）

(I assume from your img order that the images that appear lower in the code display first... but just swap the position of imgX.jpg and imgXgrey.jpg if that's an incorrect assumption.)

除此之外，你正在看一个组合的Canvas元素和IE过滤器： http://www.ajaxblender.com /howto-convert-image-to-grayscale-using-javascript.html
（忽略表示代码是PHP的标签，这是Javascript。标签可能是来自旧CMS的残留垃圾）。

Apart from that, you're looking at a combination of the Canvas element and IE filters: http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html (Ignore the tags that say the code is PHP. It's Javascript. The tags are probably leftover cruft from an old CMS.)

您必须将其扩展为在灰度和颜色之间的每个步骤的动画，所以只要你不处理大量的图像，第一个方法是最简单的。

You'd have to extend that to animate each step of the way between grayscale and color, so as long as you're not dealing with massive images, the first method is the easiest.

这篇关于JQuery / HTML / CSS灰度到彩色图像滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！