<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var imgNum = 4;		//画像の枚数
	var time = 5000;	//切り替えのタイミング
	var current = 1;	//現在の画像
	$("#txtbox li a"+current).css("color","#fa7533");
	fade(current);
	var looper = setInterval(loop, time);
	function loop(){
		if( current < imgNum ) {
			current++;
			fade(current);
			$("#txtbox a").css("color","");
		    $("#txtbar").animate({
				marginTop : parseInt($("#txtbar").css("margin-top"))+75+"px"
			},"fast");

		//最後の画像にきたら最初に戻る
		} else {
			 $("#txtbar").animate({
				marginTop : parseInt($("#txtbar").css("margin-top"))-(75*(4-1))+"px"
			},"fast");
			current = 1;
			fade(current);
			$("#txtbox a").css("color","");
		}
	}

	$('#txtbox li a').mouseover(function(){
		var barmargin = ($(this).attr('var')-1)*75;
		current = $(this).attr('var');
		fade(current);

		$("#txtbar").animate({
			marginTop : parseInt(0)+(barmargin)+"px"
		},"fast");
		$("#txtbox a").css("color","");
	});
	$('#txtbox li a').hover(
		function(){
			clearInterval(looper);
		},
		function(){
			looper = setInterval(loop,time);
		}
	);
	$('.boxInner li a').hover(
		function(){
			clearInterval(looper);
		},
		function(){
			looper = setInterval(loop,time);
		}
	);
	function fade(num) {
		$('#imgstore ul li').fadeOut(500);
		$($('#imgstore ul li').get(num-1)).fadeIn(500);
	}
});
</script>


<div id="imgBox" class="clearfix">
<div id="imgstore">
	<ul class="boxInner">
	<li id="mainimg1"><a href="http://kokousa.jp/hayhay/2012/?page_id=73"><img src="<?php bloginfo('template_url')?>/images/mainImg/mainImg1.jpg" alt="" /></a></li>
	<li id="mainimg2"><a href="http://kokousa.jp/hayhay/2012/?page_id=97"><img src="<?php bloginfo('template_url')?>/images/mainImg/mainImg2.jpg" alt="" /></a></li>
	<li id="mainimg3"><a href="http://kokousa.jp/hayhay/2012/?page_id=288"><img src="<?php bloginfo('template_url')?>/images/mainImg/mainImg3.jpg" alt="" /></a></li>
	<li id="mainimg4"><a href="http://kokousa.jp/hayhay/2012/?page_id=88"><img src="<?php bloginfo('template_url')?>/images/mainImg/mainImg4.jpg" alt="" /></a></li>
	</ul>
</div><!--imgstore-->


<div id="imgNv" class="clearfix">
	<div id="txtbarbox"><div id="txtbar"></div></div>
	<ul id="txtbox">
    	<li><a href="http://kokousa.jp/hayhay/2012/?page_id=73" id="maintxt1" var="1"><img src="<?php bloginfo('template_url')?>/images/mainImg/thumImg1.jpg" alt="" /></a></li>
    	<li><a href="http://kokousa.jp/hayhay/2012/?page_id=97" id="maintxt2" var="2"><img src="<?php bloginfo('template_url')?>/images/mainImg/thumImg2.jpg" alt="" /></a></li>
    	<li><a href="http://kokousa.jp/hayhay/2012/?page_id=288" id="maintxt3" var="3"><img src="<?php bloginfo('template_url')?>/images/mainImg/thumImg3.jpg" alt="" /></a></li>
    	<li class="lastChild"><a href="http://kokousa.jp/hayhay/2012/?page_id=88" id="maintxt4" var="4"><img src="<?php bloginfo('template_url')?>/images/mainImg/thumImg4.jpg" alt="" /></a></li>
    </ul>
</div><!--#imgNv-->
</div><!--#imgBox-->


<style>
#imgBox{
	width:745px;
	margin-bottom:10px;
}
#imgstore {
	width:600px;
	height:300px;
	overflow: hidden;
	float:left;
}
#imgstore ul{
	margin:0px;
}
#imgstore ul li {
	display: none;
	position: absolute;
}
#imgNv{
	float:left;
	width:140px;
	position:relative;
}
#txtbox{
	padding:0px;
	position: absolute;
	right:0;
	top:0;
	float:left;
}
#txtbar{
	width:10px;
	height:75px;
	background:orange;
}
#txtbarbox{
	width:10px;
	float:left;
}
#txtbox li a{
	display:block;
	height:74px;
	width:128px;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
}
#txtbox li.lastChild a{
	height:73px;
	border-bottom:1px solid #ccc;
}
</style>


