CODEWITHSUNDEEP
javascripthtmlcss
user2828552
user2828552

Reputation: 67

add animation to javascript using css

I am using the below code to add animation to the slideshow using css. But the animation is applied only to the first image and not to other images. how do I add the transition to other images as well using css only?

<html>
    <style>
        #slideshow{width:310;height:210;border-style:solid;}
        #imge{
            position:absolute;left:15;top:15;
            animation:myfirst 3s;}
        @keyframes myfirst
        {
            from {width:0;}
        to {width:300;}
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            from {width:0;}
        to {width:300;}
        }

    </style>
    <body>
        <div id="slideshow">
            <img id="imge" src="img1.jpg" height="200" width="300">
        </div>
        <script>
            var count=1;
            mf();
            function mf()
            {
                document.getElementById("imge").src="img"+count+".jpg";

                if(count<3)
                    count++;
                else
                    count=1;
                setTimeout("mf()",3000);
            }

        </script>
    </body>
</html>

Upvotes: 0

Views: 405

Answers (4)

aelor
aelor

Reputation: 11126

What you want is called animation-iteration-count property of css. You can check it out here

By setting the number you can fix the number of times the image has to show certain animation. In your case you can set it to 3 as you have 3 images. You can also loop it infinitely using the count as infinite

Upvotes: 1

Manoj
Manoj

Reputation: 1890

Use CSS3 animation property animation-iteration-count

Specifies the number of times an animation is played. Default 1,so make it to infinite

Try this code:

Fiddle:

#slideshow{width:310px;height:210px;border-style:solid;}
#imge{
position:absolute;left:15;top:15;
width:310px;height:210px;
animation:myfirst 3s;
animation-iteration-count:infinite;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-webkit-animation-iteration-count:infinite;}

@keyframes myfirst
{
from {width:0px;}
to {width:300px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {width:0px;}
to {width:300px;}
}

JS:

var count=1;
mf();
function mf()
{
document.getElementById("imge").src="img"+count+".jpg";

if(count<3)
count++;
else
count=1;
setTimeout("mf()",3000);
}

Upvotes: 1

kiro
kiro

Reputation: 111

<img id="imge" src="img1.jpg" height="200" width="300">

change to

<img class="imge" id="imge1" src="img1.jpg" height="200" width="300" style="display:none;"/>
<img class="imge" id="imge2" src="img2.jpg" height="200" width="300" style="display:none;"/>
<img class="imge" id="imge3" src="img3.jpg" height="200" width="300" style="display:none;"/>

so css #imge should be .imge

javascript

function mf()
{
  for(var i=1;i<4;i++)
  {
     document.getElementById("imge"+i).style.display="none";
  }  

  document.getElementById("imge"+count).style.display="block";

 if(count<3)
  count++;
 else
  count=1;
 setTimeout("mf()",3000);

}

when making the imge show,the animation will be triggered

Upvotes: 0

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

Switch from ids to classes:

Instead of this:

    <div id="slideshow">
        <img id="imge" src="img1.jpg" height="200" width="300">
    </div>

    #slideshow{...}
    #imge{...}

to this: 

    .slideshow{...}
    .imge{...}

The reason is that ids are unique (you can have only one), but classes not.

Hope this helps. Cheers

Upvotes: 0

Related Questions