ランダム画像切り替え

html**


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ランダム画像表示</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	
	// setRamdom();

	var timer = setInterval(reelImgs, 3000);


	setRollOver();



/////////////////////////////////////

function reelImgs()
{
	var obj = $('.reelImage');
	var index = Math.floor(Math.random()*obj.length);
	console.log(index);
	
	changeImg( obj.eq(index) );
}


function changeImg(obj)
{
	var dImg = obj.find('img:visible');
	var hImg = obj.find('img:hidden');
	
	dImg.fadeOut(1000);
	
	dImg.queue(function(){
		changeImg2(obj, hImg);
		$(this).dequeue();
	});
}

function changeImg2(obj, hiddenImg)
{
	hiddenImg.fadeIn(2500);
}

/////////////////////////////////////


function setRollOver()
{	
	$('.clickable:has(".reelImage")').each(function(){
		
		var img = $(this).find(".reelUp");
		var imgSrc = img.attr('src');
		console.log(imgSrc);
		var imgNum = String(imgSrc).match(/[^_]*jpg/);
		imgNum = String(imgNum).substr(0, 1);
		var reg = new RegExp('_' + imgNum);
		var upSrc = String(imgSrc).replace(reg, '_0');
		var overSrc = String(imgSrc).replace(reg, '_1');
		
		var overImg = $('<img/>')
						.attr('src', overSrc)
						.addClass('reelOver')
						.appendTo($(this).find('.reelImage'))
						.hide();
		
		$(this).hover(
		
			function()
			{	
				$(this).find('.reelOver').stop().fadeTo(0, 1);
			
				$(this).find('.reelUp').hide();
				$(this).find('.reelOver').show();
			},
			function()
			{
				$(this).find('.reelUp').show();
				$(this).find('.reelOver').hide();
			}
		);
		
	});
}

	
	
});
</script>
</head>
<body>
	
<div id="random">
	<div class="wrapper">
		<div class="item clickable">
			<div class="reelImage"><img src="img/1_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/2_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/3_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/4_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/5_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/6_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/7_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/8_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/9_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/10_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->

		<div class="item clickable">
			<div class="reelImage"><img src="img/11_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>

			<p>アイテム名</p>
		</div><!-- .item -->
		
	</div><!-- .wrapper -->
</div><!-- #random -->

</body>
</html>