使用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整個事情，這裏的工作演示（需要CSS3過渡的瀏覽器，如Chrome瀏覽器，Safari瀏覽器或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>​