1

这是我为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%;
}
4

1 回答 1

1

css3 过渡不应该那样工作。

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

您可以在 html 中包含 3 张图像，然后显示其中任何一张并隐藏另一张，然后对它们应用淡入淡出或其他动画。

希望它会有所帮助。

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

于 2013-05-14T03:09:18.663 回答