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(){
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>
<div class="item clickable">
<div class="reelImage"><img src="img/2_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
<div class="item clickable">
<div class="reelImage"><img src="img/3_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
<div class="item clickable">
<div class="reelImage"><img src="img/4_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
<div class="item clickable">
<div class="reelImage"><img src="img/5_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
<div class="item clickable">
<div class="reelImage"><img src="img/6_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
<div class="item clickable">
<div class="reelImage"><img src="img/7_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
<div class="item clickable">
<div class="reelImage"><img src="img/8_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
<div class="item clickable">
<div class="reelImage"><img src="img/9_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
<div class="item clickable">
<div class="reelImage"><img src="img/10_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
<div class="item clickable">
<div class="reelImage"><img src="img/11_0.jpg" alt="" width="152" height="175" class="reelUp" /></div>
<p>アイテム名</p>
</div>
</div>
</div>
</body>
</html>