图像交叉淡入淡出与JavaScript和CSS3过渡 [英] Image Crossfade with Javascript and CSS3 Transitions
问题描述
我试图通过使用CSS3过渡来使幻灯片中的图像交叉淡入淡出。我有幻灯片工作,我知道如何使用过渡,但我不知道如何让CSS和Javascript一起工作来完成这一点。我对JavaScript比较陌生,所以简化的答案非常感谢。
I am trying to get images in a slideshow to crossfade by using CSS3 transitions. I have the slideshow working and I know how to use transitions, but I don't know how to get the CSS and Javascript to work together to accomplish this. I am relatively new to Javascript so simplified answers are greatly appreciated.
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">
推荐答案
,这里是一个工作演示(需要CSS3转换的浏览器,如Chrome,Safari或Firefox 4+): http:/ /jsfiddle.net/jfriend00/cwP5Q/ 。
Since you're asking for the whole thing including CSS, here's a working demo (requires CSS3 transition-capable browser such as Chrome, Safari or 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功能的浏览器工作。
If you were going to do this for real, you should use a class library like jQuery or YUI which will make animations both easier and work in all browsers, not just CSS3 capable browsers.
这篇关于图像交叉淡入淡出与JavaScript和CSS3过渡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!