图像幻灯片html5中的过渡答案

【问题标题】：Transition in image slideshow html5图像幻灯片html5中的过渡
【发布时间】：2013-05-14 02:52:44
【问题描述】：

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

【问题讨论】：

看看你是如何设置src属性的——你使用image3 3次而不是使用image4和image5。
感谢您指出这个问题。没有注意到不够好。然而，这不是问题的重点。但是，我必须感谢您的观察。
我不知道你想要什么褪色效果。您希望在您的代码中进行什么缓动/淡化？你可以使用 jQuery api.jquery.com/fadeIn ，纯 javascript tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation 或花哨的 css3 不透明度过渡甚至关键帧动画 tympanus.net/codrops/2012/01/02/… 希望这里的东西能派上用场。
@user2316009 当然可以。我只是想指出这一点。我不认为这会解决所有问题/任何事情:)

标签： javascript html css slideshow transition

【解决方案1】：

css3 过渡不应该那样工作。

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

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

希望它会有所帮助。

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

【讨论】：