<!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>
body{
? text-align:center;
? margin-top:20px;
}
*{
? margin:0;
? padding:0;
}
ul{
? list-style:none;
}
#outDiv{
? margin:0 auto;
? overflow:hidden;
? background-color:#ccc;
? text-align:left;
}
#middle{
? position:relative;
? height:420px;
}
#middle ul li{
? text-align:center;
}
.bg1{
? background:url(big_img1.jpg) no-repeat center top;
}
.bg2{
? background:url(big_img3.jpg) no-repeat center top;
}
.bg3{
? background:url(big_img2.jpg) no-repeat center top;
}
.bg4{
? background:url(big_img4.jpg) no-repeat center top;
}
.bg5{
? background:url(big_img5.jpg) no-repeat center top;
}
.bg{
? display:none;
? position:relative;
}
li.active{
? display:block;
}
.content{
? height:420px;
? border:1px solid #000;
? margin:0 auto;
? position:relative;
}
.imgT{
? position:absolute;
? text-align:center;
? top:-200px;
? left:18%;
}
.img_contain{
? position:absolute;
? right:5%;
? top:15px;
}
.img_contain li{
? border-bottom:1px solid #ddd;
? background-color:#000;
}
li.active_img{
? filter:alpha(opacity=80);
? opacity:0.8;
}
.num{
? position:absolute;
? bottom:20px;
? left:30%;
}
.num li{
? display:inline-block;
? width:15px;
? height:15px;
? background-color:#CCC;
}
li.active_num{
? background-color:#990000;
}
#goods_category{
? width:240px;
? margin-top:10px;
? margin-left:10px;
? border:1px solid #ddd;
? position:fixed;
? background-color:#fff;
? top:10px;
? text-align:left;
? left:40px;
? z-index:10;
}
.cate h4, .cate ul{
? padding-top:5px;
? padding-bottom:5px;
? padding-left:10px;
}
h4.all_goods{
? background-color:#900;
? color:#fff;
? padding-left:10px;
? padding-top:10px;
? padding-bottom:10px;
}
.cate li{
? display:inline-block;
? padding-right:5px;
? padding-top:2px;
? padding-bottom:2px;
? color:#666;
}
</style>
</head>
<body>
<div id="outDiv">
?? <div id="middle">
????? <ul>
???? <li class="bg1 bg active">
???? <div class="content">
??????? <div class="img_top">
??????? <img class="imgT" src="hover_img1.png" />
??????? </div>
??????? <ul class="img_contain">
??????? <li>
??????? <img class="imgR" src="small_img123.jpg" />
??????? </li>
??????? </ul>
???? </div>
??</li>
??<li class="bg2 bg">
????? <div class="content">
??????? <div class="img_top">
??????? </div>
??????? <ul class="img_contain">
??????? <li>
??????? <img src="small_img1.jpg" />
???? </li>
???? <li>
??????? <img src="small_img2.jpg" />
???? </li>
???? <li>
??????? <img src="small_img3.jpg" />
???? </li>
??????? </ul>
???? </div>
??</li>
??<li class="bg3 bg">
???? <div class="content">
??????? <div class="img_top">
??????? <img class="imgT" src="hover_img2.png" />
??????? </div>
??????? <ul class="img_contain">
??????? <li>
??????? <img src="small_img1.jpg" />
???? </li>
???? <li>
??????? <img src="small_img2.jpg" />
???? </li>
???? <li>
??????? <img src="small_img3.jpg" />
???? </li>
??????? </ul>
???? </div>
??</li>
??<li class="bg4 bg">
????? <div class="content">
??????? <div class="img_top">
??????? </div>
??????? <ul class="img_contain">
??????? <li>
??????? <img src="small_img1.jpg" />
???? </li>
???? <li>
??????? <img src="small_img2.jpg" />
???? </li>
???? <li>
??????? <img src="small_img3.jpg" />
???? </li>
??????? </ul>
???? </div>
??</li>
??<li class="bg5 bg">
????? <div class="content">
??????? <div class="img_top">
??????? </div>
??????? <ul class="img_contain">
??????? <li>
??????? <img src="small_img1.jpg" />
???? </li>
???? <li>
??????? <img src="small_img2.jpg" />
???? </li>
???? <li>
??????? <img src="small_img3.jpg" />
???? </li>
??????? </ul>
???? </div>
??</li>
?? </ul>
?? <ul class="num">
????? <li class="active_num">1</li>
????? <li>2</li>
????? <li>3</li>
????? <li>4</li>
????? <li>5</li>
????? </ul>
?? </div>
?? </div>
</div>
<div id="goods_category">
? <h4 class="all_goods">所有商品分类</h4>
???? <dl class="cate">
??<dd>
???? <h4>服装/内衣/配件</h4>
???? <ul>
??????? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? </ul>
??</dd>
??<dd>
???? <h4>鞋/箱包</h4>
???? <ul>
??????? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? </ul>
??</dd>
??<dd>
???? <h4>珠宝饰品/手表眼镜</h4>
???? <ul>
??????? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? </ul>
??</dd>
??<dd>
???? <h4>化妆品</h4>
???? <ul>
??????? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? </ul>
??</dd>
??<dd>
???? <h4>运动户外</h4>
???? <ul>
??????? <li>运动鞋</li>
???? <li>运动鞋</li>
???? <li>运动鞋</li>
???? <li>运动鞋</li>
???? <li>运动鞋</li>
???? <li>运动鞋</li>
???? </ul>
??</dd>
??<dd>
???? <h4>手机数码</h4>
???? <ul>
??????? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? </ul>
??</dd>
??<dd>
???? <h4>家用电器</h4>
???? <ul>
??????? <li>大家电</li>
???? <li>大家电</li>
???? <li>大家电</li>
???? <li>大家电</li>
???? <li>大家电</li>
???? <li>大家电</li>
???? </ul>
??</dd>
??<dd>
???? <h4>家具建材</h4>
???? <ul>
??????? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? </ul>
??</dd>
??<dd>
???? <h4>家纺/居家</h4>
???? <ul>
??????? <li>四件套</li>
???? <li>四件套</li>
???? <li>四件套</li>
???? <li>四件套</li>
???? <li>四件套</li>
???? <li>四件套</li>
???? </ul>
??</dd>
??<dd>
???? <h4>母婴玩具</h4>
???? <ul>
??????? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? </ul>
??</dd>
??<dd>
???? <h4>食品</h4>
???? <ul>
??????? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? </ul>
??</dd>
??<dd>
???? <h4>医药保健</h4>
???? <ul>
??????? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? </ul>
??</dd>
??<dd>
???? <h4>汽车配件</h4>
???? <ul>
??????? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? </ul>
??</dd>
??<dd>
???? <h4>图书音像</h4>
???? <ul>
??????? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? </ul>
??</dd>
??<dd>
???? <h4>文化娱乐</h4>
???? <ul>
??????? <li>电子凭证</li>
???? <li>电子凭证</li>
???? <li>电子凭证</li>
???? <li>电子凭证</li>
???? </ul>
??</dd>
??<dd>
???? <h4>手机/网游点卡</h4>
??</dd>
? </dl>
? </div>
??? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
? <p style="padding-left:300px">end</p>
? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
?? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
????? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
?? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script>
/*
* 仿天猫首页-滚动广告和分类列表；
*? ie8，ff，opera中测试可用，其他浏览器未测；
*? ******made by keimon*********
* *********2013-01-14**********
*/
$(function(){
?? var len = $('.bg').length;
?? var i=0;
?? var timer;
?? //定时和鼠标移入数字标签时，发生的通用方法
?? function tongyong(i){
?? $('.bg').fadeOut('fast');??
?? $('.imgT').animate({top:'-200px'},'fast',function(){
????? $('.bg').eq(i).fadeIn('fast');
?? });
?? $('.imgT').animate({top:'25px'},'slow');
?? $('.num li').removeClass('active_num');
?? $('.num li').eq(i).addClass('active_num');
?? }
??
?? //定时发生scroll方法
?? function scroll(i){
????? if(i==5){
?????? i=0
?? }
?? tongyong(i)
?? timer = setTimeout(function(){
????? scroll(i);
?? },3000)
?? i++;
?? }
?? //调用scroll方法
?? scroll(i);
??
?? //5个数字标签
?? $('.num li').hover(function(){
????? clearTimeout(timer);
????? var that = this;
?? var index = $('.num li').index(that);
?? tongyong(index);
?? },function(){
????? var that = this;
?? var index = $('.num li').index(that);
????? timer = setTimeout(function(){
????? scroll(index+1);
?? },3000)
?? })
??
?? //当鼠标移入到content上面时，停止滚动，移出时，继续滚动；
?? $('div.content').hover(function(){
????? clearTimeout(timer);
?? },function(){
????? var that = this;
?? var index = $('.content').index(that);
????? timer = setTimeout(function(){
????? scroll(index+1);
?? },3000)
?? })
??
?? //右侧三个img图片
?? var lens = $('.img_contain li').length;
?? $('.img_contain li').hover(function(){
????? var that = this;
?? $('.img_contain li').addClass('active_img')
?? $(that).removeClass('active_img');
?? },function(){
????? var that = this;
?? $('.img_contain li').removeClass('active_img')
?? })
??
?? //左侧分类列表
?? $('dd:odd').css('backgroundColor','#eee');
?? var scrollT=0;
??? $(window).scroll(function(e,scrollT){
??? var scrollTop = $(document).scrollTop();
??? var scrolls = Math.floor(scrollTop/50);
??? if(scrolls>15){
?????? scrolls = 15;
??? }
??? $('dd ul:lt('+scrolls+')').slideUp();
??? $('dd ul:gt('+scrolls+')').slideDown();
??? if(scrolls==0){
????? $('dd ul').eq(0).slideDown();
??? }
?})
})
</script>
</body>
</html>