<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
img{
border:none;
}
ul{
list-style:none;
}
body{
text-align:center;
margin-top:10px;
}
#outDiv{
margin:0 auto;
background:url(el-bg.jpg);
background-repeat:no-repeat;
background-position:center top;
text-align:center;
background-color:#333;
}
#container{
width:890px;
height:565px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#container dl dd{
float:left;
position:relative;
padding-left:2px;
}
#container dl dd li{
position:relative;
width:210px;
height:410px;
padding-left:5px;
padding-right:5px;
display:block;
top:-124px;
}
.img{
position:absolute;
top:0;
left:0;
}
img.active{
opacity:1;
filter:alpha(opacity=100);
}
.hImg{
position:absolute;
top:0;
left:0;
opacity:0;
filter:alpha(opacity=0);
}
li.evenLi{
top:0px;
}
li.ordLi{
top:-248px;
}
</style>
</head>
<body>
<div id="outDiv">
<div id="container">
<dl>
<dd>
<ul>
<li>
<a href="#">
<img src="jj.jpg" class="img" />
<img src="jj-h.jpg" class="hImg" />
</a>
</li>
<li>
<a href="#">
<img src="only.jpg" class="img" />
<img src="only-h.jpg" class="hImg" />
</a>
</li>
</ul>
</dd>
<dd>
<ul>
<li>
<a href="#">
<img src="gly.jpg" class="img" />
<img src="gly-h.jpg" class="hImg" />
</a>
</li>
<li>
<a href="#">
<img src="vm.jpg" class="img" />
<img src="vm-h.jpg" class="hImg" />
</a>
</li>
</ul>
</dd>
<dd>
<ul>
<li>
<a href="#">
<img src="el.jpg" class="img" />
<img src="el-h.jpg" class="hImg" />
</a>
</li>
<li>
<a href="#">
<img src="gzm.jpg" class="img" />
<img src="gzm-h.jpg" class="hImg" />
</a>
</li>
</ul>
</dd>
<dd>
<ul>
<li>
<a href="#">
<img src="st.jpg" class="img" />
<img src="st-h.jpg" class="hImg" />
</a>
</li>
<li>
<a href="#">
<img src="nb.jpg" class="img" />
<img src="nb-h.jpg" class="hImg" />
</a>
</li>
</ul>
</dd>
</dl>
</div>
<div id="test"></div>
</div>
<div id="t"></div>
<script type="text/javascript">
/*
* 仿银泰网,旗舰店品牌图片展示;
* ie8,ff,chrome浏览器中测试可用,其余浏览器未测;
* ******made by keimon*********
* ********2013-01-12**********
*/
$(function(){
var len = $('#container dl dd li').length;
var $li = $('#container dl dd li')
//公用方法;
function gongyong(randomNum){
$('#t').html(randomNum);
$('#container dl dd li').stop().animate({top:'-124px'},'slow');
//同个ul下的两个li的处理
if(randomNum%2==1){
$li.eq(randomNum).add($li.eq(randomNum-1))
.stop().animate({top:'-248px'},'slow');
}else{
$li.eq(randomNum).add($li.eq(randomNum+1))
.stop().animate({top:'0px'},'slow');
}
//切换背景
var nameLen=$li.eq(randomNum).find('.img')
.attr('src').indexOf('.');
var name = $li.eq(randomNum).find('.img')
.attr('src').substring(0,nameLen);
var bgName = name+'-bg.jpg';
$('#outDiv').css('backgroundImage','url('+bgName+')');
//黑白变彩色
$li.eq(randomNum).parents().find('.hImg').removeClass('active')
$li.eq(randomNum).find('.hImg').addClass('active');
}
function showHImg(){
var randomNum = Math.ceil(Math.random()*(len-1));
gongyong(randomNum);
timer = setTimeout(function(){
showHImg();
},2000)
}
showHImg()
for(var i=0; i<len; i++){
$li.eq(i).hover(function(){
var items = this;
var index = $li.index(items);
clearTimeout(timer);
gongyong(index);
},function(){
showHImg();
})
}
})
</script>
</body>
</html>