Question

我在这里是为html5图像幻灯片所做的。它在我的localhost上运行良好。但是我想知道为什么幻灯片中没有任何转换。转换，如淡化第一张图片，然后让第二张图片出现。

HTML CODES

<!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 FILE

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

Answer 1

css3过渡不应该那样。

你的代码只需每2500毫秒改变你的图像的src，这不会触发任何css3转换。

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

希望它会有所帮助。

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

图像幻灯片中的转换html5

1 个答案: