jQuery でスライドショー 2010.01.15記

css globe: Simple Way to Random Display or Rotate Content Using JavaScript and CSS

HTML

<ul id="tips">
	<li><img src="./files/20100115/s1.jpg" /></li>
	<li><img src="./files/20100115/s2.jpg" /></li>
	<li><img src="./files/20100115/s3.jpg" /></li>
</ul>

ヘッダ JavaScript

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript">
this.randomtip = function(){
	var pause = 5000; // define the pause for each tip (in milliseconds) 
	var length = $("#tips li").length; 
	var temp = -1;		

	this.getRan = function(){
		// get the random number
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
	this.show = function(){
		var ran = getRan();
		// to avoid repeating
		while (ran == temp){
			ran = getRan();
		}; 
		temp = ran;
		$("#tips li").hide();	
		$("#tips li:nth-child(" + ran + ")").fadeIn("fast");		
	};

	show(); setInterval(show,pause);
};

$(document).ready(function(){
	randomtip();
});
</script>

CSS

<style type="text/css" media="screen">
#tips, #tips li{
	margin:0;
	padding:0;
	list-style:none;
}
#tips{
	width:440px;
	height:340px;
}
#tips li{
	padding:20px;
	display:none; /* hide the items at first only */
}
#tips {
	background:#e1e1e1;
}
</style>