使用 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>​