图片幻灯片中的过渡html5

这里是我为html5图片幻灯片所做的。它在我的本地主机上运行良好。不过，我想知道为什么幻灯片中没有任何转换。如淡出第一张照片然后让第二张照片出现的过渡。图片幻灯片中的过渡html5

HTML码

<!DOCTYPE html> 

<html lang="en"> 
<head> 
<script type="text/javascript"> 
<!--> 
var image1 = new Image() 
image1.src = "image/s1.jpg" 
var image2 = new Image() 
image2.src = "image/s2.jpg" 
var image3 = new Image() 
image3.src = "image/s3.jpg" 
var image4 = new Image() 
image4.src = "image/s4.jpg" 
var image5 = new Image() 
image5.src = "image/s5.jpg" 
//--> 
</script> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>iPolice</title> 
<link rel="stylesheet" href="css/style.css" type="text/css" /> 

<!--[if lt IE 8]> 
    <script src ="http://ie7-js.googlecode.com/svn/version/2.1  (beta2)/IE8.js"></script> 
<![endif]-->  
</head> 

<body> 
<ul id="Slideshow"> 
<img src="image/s1.jpg" name="slide" width="1148px" height="250px"> 
<script type="text/javascript"> 
<!-- 
    var step = 1 
    function slideit() { 
     document.images.slide.src = eval("image" + step + ".src") 
     if (step < 3) 
      step++ 
     else 
      step = 1 
     setTimeout("slideit()", 2500) 
    } 
    slideit() 
    //--> 
</script> 
</ul>

CSS文件

#Slideshow 
{ 
width: 1000px; 
left:-4.4%; 
position: absolute; 
margin-top: 4%; 
}

来源

2013-05-14 Teo Chuen Wei Bryan

看你如何设置'src'属性 - 使用了'image3' 3倍，而不是使用'image4'和'image5'。 – Ian 2013-05-14 02:59:19

感谢您指出这个问题。没有注意到很好。但是，这不是问题的主要观点。但是，我仍然要感谢你的观察。 – 2013-05-14 03:02:48

我不确定你想在那里褪色。你希望你的代码中究竟做了什么缓解/褪色？你可以使用jQuery http://api.jquery.com/fadeIn/，纯粹的JavaScript http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation或花哨的css3不透明转换甚至是关键帧动画http ：//tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/希望这里来得方便。 – 2013-05-14 03:20:09

CSS3过渡不应该工作那样。

您的代码只是每2500毫秒更改一次您的图像的src，这不会触发任何css3转换。

你可以在你的html中有3张图片，只显示它们中的任何一张并隐藏另一张图片，然后应用淡入淡出或其他动画。

希望它会有所帮助。

http://www.the-art-of-web.com/css/css-animation/

来源

2013-05-14 03:09:18 simplemx

图片幻灯片中的过渡html5

回答

相关问题