Skip to content

Instantly share code, notes, and snippets.

@clockwork189

clockwork189/JQuery Image Transition Code

Created October 15, 2011 19:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save clockwork189/1290044 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save clockwork189/1290044 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. clockwork189 created this gist Oct 15, 2011.
    23 changes: 23 additions & 0 deletions JQuery Image Transition Code
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <script type="text/javascript">
    // Render on page load
    $(document).ready(function() {
    $(function(){
    // img_container is the class that holds all the images. See after script tags.
    $('.img_container img:gt(0)').hide();
    setInterval(function(){
    $('.img_container :first-child').fadeOut()
    .next('img').fadeIn()
    .end().appendTo('.img_container');},
    8000);
    });
    });

    </script>

    <div class="img_container">
    <img src="images/img1.png">
    <img src="images/img2.png">
    <img src="images/img3.png">
    <img src="images/img4.png">
    <img src="images/img5.png">
    </div>