CODEWITHSUNDEEP
javascripthtmlcssslideshowtransition
Bryan
Bryan

Reputation: 8697

Transition in image slideshow html5

Here I have is what I done for a html5 image slideshow. It works well on my localhost. However i wonder why there isn't any transition within the slideshow. Transition such as fading the first picture then letting the second appear.

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%;
}

Upvotes: 1

Views: 9767

Answers (1)

simplemx
simplemx

Reputation: 83

css3 transitions should not work like that.

your code just change your image's src about every 2500 ms, which don't trigger any css3 transitions.

you can have 3 images in your html and just show any one of them and hide the other, then apply fade or other animation to them.

hope it would help.

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

Upvotes: 1

Related Questions