フェードインするスライドショー

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript" src="js/fade.js"></script> 

[fade.js]JavaScript

// JavaScript Document
$(function() {

	//変数設定
  var interal=8000;
  var timer;
	var speed = 1000;
	var num=0;

	
	//ナビゲーション表示	
	var slide = $("#slide li");
	$("#slide").after("<div id=\"slide_nav\"><ol></ol></div>");
	var slidenav = $("#slide_nav ol");
	var maxnum = slide.length;
	for(var i = 0 ; i < maxnum ; i++){
	$(slidenav).append("<li><span><img src=\"img/navbtn_on.png\" /></span><a href=javascript:void(0);\"><img src=\"img/navbtn.png\" /></a></li>");
	$("li:eq(0) span",slidenav).fadeIn(speed);
	}

	//スライドfade
	function fadeImg(){
	var slidenavbtn = $("li",slidenav);
	$(slide[num]).fadeOut(speed);
	$(">span",slidenavbtn.get(num)).fadeOut(speed);
	if(num==maxnum-1){$(slide[0]).fadeIn(speed);
										$(">span",slidenavbtn[0]).fadeIn(speed);num=0;}
	else{
	$(slide[num+1]).fadeIn(speed);
	$(">span",slidenavbtn[num+1]).fadeIn(speed);
	num++;};
	}

  //タイマー
　function starttimer(){
  timer=setInterval(fadeImg,interal);
  }
　function stoptimer(){
  clearInterval(timer);
  }
  starttimer();

	//nav動作
	$("#slide_nav ol li").click(function () {
	var index = $("#slide_nav ol li").index(this);
	var slide = $("#slide li");
	var slidenavbtn = $("#slide_nav ol li");

	if($(">span",this).css('display') == 'block'){}
	else{
	stoptimer();
	$(slide).fadeOut(speed);
	$("span",slidenavbtn).fadeOut(speed);
	$(slide[index]).fadeIn(speed);
	$(">span",this).fadeIn(speed);
	};
								   
});	
								   
});	

HTMl

<div class="mod_slide">
<ul id="slide">
<li class="first"><a href="#"><img src="img/00.jpg" width="520" height="240"></a></li>
<li><a href="#"><img src="img/01.jpg" width="520" height="240"></a></li>
<li><a href="#"><img src="img/02.jpg" width="520" height="240"></a></li>
<li>テキストも入ります。</li>
</ul>
<!--mod_slide_end--></div>

CSS

.mod_slide{
	margin:0 auto;
	width:520px;
}

#slide{
	width:520px;
	height:240px;
	position:relative;
	overflow:hidden;
	border:solid 1px #CCC;
}
#slide li{
	display: none;
	position: absolute;
}

#slide li.first{
	display:block;
}

/* navigation */
#slide_nav ol{
	width:520px;
	margin:5px 0 0 0;
	text-align:center;
}
#slide_nav ol li{
	display:inline;
	position:relative;
	
}
#slide_nav ol li span{
	padding:3px;
	position:absolute;
	top:0;
	left:0;
	display:none;
}
#slide_nav ol li a{
	padding:3px;
	display:inline-block;
}