画像JavaScriptとCSS3トランジションを使用したクロスフェード

Question

CSS3トランジションを使用してクロスフェードするためにスライドショーで画像を取得しようとしています。私はスライドショーが動作していると私はトランジションを使用する方法を知っているが、私はCSSとJavascriptがこれを達成するために一緒に働く方法を知らない。私はJavascriptには比較的新しいので、簡略化された答えは非常に高く評価されています。

Javascriptを：

var images = new Array() 
images[0] = "img/1.jpg"; 
images[1] = "img/2.jpg"; 
images[2] = "img/3.jpg"; 
images[3] = "img/4.jpg"; 
images[4] = "img/5.jpg"; 
var timer = setInterval(checkImage, 3000); 
var x=0; 

function checkImage() 
{ 
    if (x>4) 
    { 
     x=0; 
     changeImage(); 
    } 
    else 
    { 
     changeImage(); 
    } 
} 

function changeImage() 
{ 
document.getElementById("slideimg").src=images[x] 
x++; 
} 

HTML：

<img src="img/5.JPG" width="400" height="300" id="slideimg"> 

Answer 1

あなたはCSSを含む全体のことを求めているので、ここでの作業のデモは、（だが、このようなクロム、SafariなどCSS3トランジション対応ブラウザが必要ですまたはFirefox 4以降）：http://jsfiddle.net/jfriend00/cwP5Q/。

HTML：

<div id="container"> 
<img id="slideimg0" class="slide showMe" src="http://photos.smugmug.com/photos/344287800_YL8Ha-S.jpg"> 
<img id="slideimg1" class="slide" src="http://photos.smugmug.com/photos/344287888_q22cB-S.jpg"> 
<img id="slideimg2" class="slide" src="http://photos.smugmug.com/photos/344284440_68L2K-S.jpg"> 
<img id="slideimg3" class="slide" src="http://photos.smugmug.com/photos/344286315_oyxRy-S.jpg"> 
<img id="slideimg4" class="slide" src="http://photos.smugmug.com/photos/344285236_hjizX-S.jpg"> 
</div> 

はCSS：

#container {position: relative; font-size: 0;} 
.slide { 
    border: none; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    -webkit-transition: opacity 2s linear; 
    -moz-transition: opacity 2s linear; 
    -o-transition: opacity 2s linear; 
    transition: opacity 2s linear; 
} 
.showMe {opacity: 1;} 

JS（実行ページは準備ができている）：

var timer = setInterval(nextImage, 4000); 
var curImage = 0; 
var numImages = 5; 

function nextImage() { 
    var e; 
    // remove showMe class from current image 
    e = document.getElementById("slideimg" + curImage); 
    removeClass(e, "showMe"); 

    // compute next image 
    curImage++; 
    if (curImage > numImages - 1) { 
     curImage = 0; 
    } 

    // add showMe class to next image 
    e = document.getElementById("slideimg" + curImage); 
    addClass(e, "showMe"); 
} 

function addClass(elem, name) { 
    var c = elem.className; 
    if (c) c += " "; // if not blank, add a space separator 
    c += name; 
    elem.className = c; 
} 

function removeClass(elem, name) { 
    var c = elem.className; 
    elem.className = c.replace(name, "").replace(/ /g, " ").replace(/^ | $/g, ""); // remove name and extra blanks 
} 

あなたが本当のためにこれをやろうとしていた場合、あなたがすべきjQueryやYUIのようなクラスライブラリを使うと、CSS3対応のブラウザだけでなく、すべてのブラウザで簡単にアニメーションを作成できます。

Answer 2

編集： 私は前に投稿したものよりも拡張性の高いスクリプトを作成しました s（）関数がスライド番号に切り替わると、p変数が再生/一時停止になります。 これで、スライドを切り替えるボタンを簡単に作成できます。 画像をクリックしてどこかに行きたいと思っているので、リンク内に画像を作成しました。

<style> 
div{position:relative;width:900px;height:350px;overflow:hidden;margin:0 auto;border:solid 10px #fff;box-shadow:0 0 10px rgba(0,0,0,0.4);background:#fff;margin-bottom:60px;} 
div>a>img{opacity:0;position:absolute;top:0;left:0;width:900px; 
-webkit-transition:opacity 1s linear; 
-moz-transition:opacity 1s linear; 
-ms-transition:opacity 1s linear; 
-o-transition:opacity 1s linear; 
transition:opacity 1s linear} 
body{text-align:center} 
</style> 

<script> 
var i=0,p=1,q=function(){return document.querySelectorAll("div>a>img")}; 

function s(e){ 
for(c=0;c<q().length;c++){q()[c].style.opacity="0";q()[e].style.opacity="1"} 
} 

setInterval(function(){ 
if(p){i=(i>q().length-2)?0:i+1;s(i)} 
},5000); 
</script> 

<a href="javascript:p=1">play</a> 
<a href="javascript:s(0);i=0;p=0">0</a> 
<a href="javascript:s(1);i=1;p=0">1</a> 
<a href="javascript:s(2);i=2;p=0">2</a> 
<a href="javascript:s(3);i=3;p=0">3</a> 
<a href="javascript:s(4);i=4;p=0">4</a> 
<div> 
<a><img src="Public/shot1.png" style="opacity:1"></a> 
<a><img src="Public/shot2.png"></a> 
<a><img src="Public/shot3.png"></a> 
<a><img src="Public/shot4.png"></a> 
<a><img src="Public/shot5.png"></a> 
</div>​