Cacher is the code snippet organizer for pro developers

http://www.favorite-labo.org/view/304?continue=1

スタイル

  	ul.slide {
			overflow: hidden;
			width: 960px;
			height: 370px;
			margin: 0;
			margin-bottom: 100px;
		}
		ul.slide li {
			position: absolute;
			list-style: none;
		}

  	.main,.main2{
			position:relative;
			width: 900px;
			margin: 0 auto;
		}
		.main2{
			margin-top: 40px;
			color: #FFF;
		}
		.over{
			position: absolute;
			width: 150px;
			height: 300px;
			background-color: #ccc;
			top:0;
			right:0;	
			margin: 0;
			float: left;
     filter:alpha(opacity=85);
     -moz-opacity:0.85;
     -khtml-opacity: 0.85;
     opacity:0.85;
     text-align: center;
		}
		.over2{
			position: absolute;
			width: 150px;
			height: 300px;
			background-color: #ccc;
			top:0;
			right:170px;	
			margin: 0;
			float: left;
	     filter:alpha(opacity=85);
	     -moz-opacity:0.85;
	     -khtml-opacity: 0.85;
	     opacity:0.85;
	     text-align: center;
		}

HTML


  	<div class="main">
		<ul class="slide megane"><li style="display: list-item;"><img src="http://dummyimage.com/600x400/000/fff"></li><li style="display: list-item;"><img src="http://dummyimage.com/600x400/ddd/fff"></li><li><img src="http://dummyimage.com/600x400/eee/fffg"></li></ul>
		</div>

script

  	<script src="./slide_files/jquery.js"></script>
		<script src="./slide_files/jquery.slide.js"></script>
		<script>
		$(document).ready(function() {
			$('.slide').slide({
				interval: 3000, //3秒ごとに切り替え
				speed: 2000     //2秒かけて切り替え
			});
		});
		</script>