Results 1 to 2 of 2

Thread: Simple Auto-Playing Slideshow, using jQuery

  1. #1
    Join Date
    2005-03-08
    Posts
    2

    Default Simple Auto-Playing Slideshow, using jQuery

    HTML
    Wrapper with div's as the "slides", which can contain any content.

    Code:
    <div id="slideshow">
       <div>
         <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
       </div>
       <div>
         <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
       </div>
       <div>
         Pretty cool eh? This slide is proof the content can be anything.
       </div>
    </div>
    CSS
    Slides need to be absolutely positioned within the wrapper. This has a tiny bit of extra pizazz:
    Code:
    #slideshow { 
        margin: 50px auto; 
        position: relative; 
        width: 240px; 
        height: 240px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }
    
    #slideshow > div { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }
    jQuery JavaScript
    Run after DOM is ready.
    Code:
    $("#slideshow > div:gt(0)").hide();
    
    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);

  2. #2
    Join Date
    2005-03-08
    Posts
    2

    Default

    Works under jquery-1.12.4.min.js

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. ZenCart auto facebook插件 配置使用
    By topvip in forum ZenCart
    Replies: 0
    Last Post: 2012-12-21, 07:24 PM
  2. CMS Made Simple的几点技巧
    By yahoo in forum Blog(博客)/Wiki(维客)/RSS/Cms
    Replies: 0
    Last Post: 2008-02-13, 10:08 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •