<html> <head> <title>slideshow</title> <mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script> <mce:script type="text/css"><!-- div.slideshow ul { position:relative;} div.slideshow ul li { position:absolute; left:0; top:0; width:100%; text-align:center;} // --></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("<div>").addClass("slideshow").append("<h3>Books</h3>").append("<ul>/ <li><a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/k-sharp/249959/o_97%20Things%20Every%20Programmer%20Should%20Know.PNG" mce_src="http://images.cnblogs.com/cnblogs_com/k-sharp/249959/o_97%20Things%20Every%20Programmer%20Should%20Know.PNG"></a></li>/ <li><a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/k-sharp/249959/o_97%20Things%20Every%20Software%20Architect%20Should%20Know.PNG" mce_src="http://images.cnblogs.com/cnblogs_com/k-sharp/249959/o_97%20Things%20Every%20Software%20Architect%20Should%20Know.PNG"></a></li>/ <li><a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/k-sharp/249959/o_The%20Productive%20Programmer.PNG" mce_src="http://images.cnblogs.com/cnblogs_com/k-sharp/249959/o_The%20Productive%20Programmer.PNG"></a></li>/ </ul>").appendTo("#leftcontentcontainer"); $('div.slideshow li:gt(0)').hide();//hide all of <li> except the first one setInterval(function(){ $('div.slideshow li:first-child').fadeOut().next('li').fadeIn().end().appendTo('div.slideshow ul');},3000); // hide first-child,show next and put the first-child to the end for recycle }); // --></mce:script> </head> <body> <div id="leftcontentcontainer"> </div> </body> </html>