2

ここの誰かが私を助けてくれることを願っています。私は現在、クライアント用の Web サイトを構築しています。インデックス ページには、一連の画像を表示する画像スライダー/フェーダーがあります。クライアントが要求したのは、ある画像から別の画像への移行時に、シーケンス内の次の画像がグレースケールとしてフェードインし、ゆっくりと色に変わり、次の画像をロードする前に数秒間一時停止することです.

トランジションには問題なく機能するイメージ フェーダーを使用していますが、グレースケール機能用に変更したいと考えています。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 に答える