<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>0</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/st.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-----top------->
<div class="top_box">
<div class="top_con">
<div class="logo"><a href="#" target="_blank"><img src="images/logo.png"></a><a href="#" target="_blank"><img src="images/logo_left.png"></a></div>
<div class="ss">
<ul class="ss_1">
<li class="bg_c"><a href="#" target="_blank">产品</a></li>
<li><a href="#" target="_blank">供应商</a></li>
</ul>
<div class="text_input">
<form action="" method="">
<input id="tex" name="" type="text" value="输入产品名称，搜源头好货">
<input type="submit" id="but" value="搜索">
</form>
</div>
</div>
</div>
</div>
<!-----top_nav------->
<div class="top_nav">
<div class="top_nav_box">
<h4>热门产地源头好货</h4>
<ul>
<li><a href="#" target="_blank">首页</a></li>
<li><a href="#" target="_blank">行业产地</a></li>
<li><a href="#" target="_blank">源头产地</a></li>
<li><a href="#" target="_blank">产业带地图</a></li>
<li class="bg_none"><a href="#" target="_blank">入住产业带</a></li>
</ul>
</div>
</div>
<!-----main_box1------->
<div class="main_box1">
<div class="main_box1_left">
<dl>
<dt><b class="b_1"><a href="#" target="_blank">五金</a></b><b class="b_2"><a href="#" target="_blank">建材</a></b></dt>
<dd><a href="#" target="_blank">保暖内衣</a><a href="#" target="_blank">胸垫</a><a href="#" target="_blank">儿童内衣</a><a href="#" target="_blank">无纺布</a></dd>
</dl>
<dl>
<dt><b class="b_1"><a href="#" target="_blank">五金</a></b><b class="b_2"><a href="#" target="_blank">建材</a></b></dt>
<dd><a href="#" target="_blank">保暖内衣</a><a href="#" target="_blank">胸垫</a><a href="#" target="_blank">儿童内衣</a><a href="#" target="_blank">无纺布</a></dd>
</dl>
<dl>
<dt><b class="b_1"><a href="#" target="_blank">五金</a></b><b class="b_2"><a href="#" target="_blank">建材</a></b></dt>
<dd><a href="#" target="_blank">保暖内衣</a><a href="#" target="_blank">胸垫</a><a href="#" target="_blank">儿童内衣</a><a href="#" target="_blank">无纺布</a></dd>
</dl>
<dl>
<dt><b class="b_1"><a href="#" target="_blank">五金</a></b><b class="b_2"><a href="#" target="_blank">建材</a></b></dt>
<dd><a href="#" target="_blank">保暖内衣</a><a href="#" target="_blank">胸垫</a><a href="#" target="_blank">儿童内衣</a><a href="#" target="_blank">无纺布</a></dd>
</dl>
<dl>
<dt><b class="b_1"><a href="#" target="_blank">五金</a></b><b class="b_2"><a href="#" target="_blank">建材</a></b></dt>
<dd><a href="#" target="_blank">保暖内衣</a><a href="#" target="_blank">胸垫</a><a href="#" target="_blank">儿童内衣</a><a href="#" target="_blank">无纺布</a></dd>
</dl>
<dl class="bd_none">
<dt><b class="b_1"><a href="#" target="_blank">五金</a></b><b class="b_2"><a href="#" target="_blank">建材</a></b></dt>
<dd><a href="#" target="_blank">保暖内衣</a><a href="#" target="_blank">胸垫</a><a href="#" target="_blank">儿童内衣</a><a href="#" target="_blank">无纺布</a></dd>
</dl>
</div>
<div class="main_box1_right">
<div class="main_box1_right_1">
<div class="main_box1_right_1_1">
<div class="banner_left">
<ul class="ul_w">
<li><a href="#" target="_blank"><img src="images/banner_1.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_1.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_1.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_1.png" alt="img"></a></li>
</ul>
</div>
<div class="banner_right">
<ul class="hh">
<li><a href="#" target="_blank">保温材料专场采购会</a></li>
<li class="h_bg"><a href="#" target="_blank">保温材料专场采购会</a></li>
<li><a href="#" target="_blank">保温材料专场采购会</a></li>
<li><a href="#" target="_blank">保温材料专场采购会</a></li>
</ul>
<ul class="ok_but">
<li class="left_but"></li>
<li><img src="images/ll.png"></li>
<li class="ok_ok"></li>
<li><img src="images/ll.png"></li>
<li class="right_but"></li>
</ul>
</div>
</div>
<div class="main_box1_right_1_2">
<div class="box1_1">
<b class="b_left"></b>
<div class="bn_w">
<ul class="ul_ww">
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
</ul>
<p class="num_i"><span>1</span>/<b></b></p>
</div>
<b class="b_right"></b>
</div>
<div class="box1_2">
<b class="b_leftw"></b>
<div class="bn_ww">
<ul class="ul_www">
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img.png" alt="img"></a></li>
</ul>
<p class="num_ii"><span>1</span>/<b></b></p>
</div>
<b class="b_rightw"></b>
</div>
</div>
</div>
<div class="main_box1_right_2">
<ul>
<li class="bd_1"><a href="#" target="_blank"><img src="images/ico.png"></a><br/><a href="#" target="_blank">政府合作</a></li>
<li><a href="#" target="_blank"><img src="images/ico.png"></a><br/><a href="#" target="_blank">政府合作</a></li>
<li class="bd_1"><a href="#" target="_blank"><img src="images/ico.png"></a><br/><a href="#" target="_blank">政府合作</a></li>
<li><a href="#" target="_blank"><img src="images/ico.png"></a><br/><a href="#" target="_blank">政府合作</a></li>
</ul>
<div class="banner_x">
<ul class="bn">
<li><a href="#" target="_blank"><img src="images/banner_img1.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img1.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img1.png" alt="img"></a></li>
<li><a href="#" target="_blank"><img src="images/banner_img1.png" alt="img"></a></li>
</ul>
</div>
<ol class="num_bg clear">
<li></li>
<li class="h_b"></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</div>
<!-----main_box2------->
<div class="main_box2">
<div class="main_2">
<div class="main_2_1"></div>
<div class="main_2_2"></div>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/tx.js"></script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body{ font-family:"宋体"; font-size:12px;}
a{ text-decoration:none; color:#454545;}
a:hover{ text-decoration:underline;}
.clear {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
clear: both;
font-size: 0;
height: 0;
line-height: 0;
overflow: hidden;
}
.top_box{ background:url(../images/top_bg.png) repeat-x; height:103px; 100%;}
.top_con{ 1000px; margin:0 auto; height:103px;}
.logo{ float:left; 340px; margin:20px 0 0 20px;}
.logo a img{ margin-right:20px;}
.ss{ float:left; 400px; margin:20px 0 0 100px;}
.ss_1 li{ float:left; 48px; margin-right:10px; text-align:center; height:24px; line-height:24px;}
.ss_1 li a{ color:#FFF;}
.ss_1 .bg_c{ background:#7D0000;}
.text_input{ clear:both; 332px; height:28px; padding:1px; background:#7D0000; border:1px #7D0101 solid;}
#tex{ float:left; 280px; color:#999; text-indent:4px; height:26px; line-height:26px; border:0 none;}
#but{ float:left; border:0 none; background:none; cursor:pointer; color:#FFF; font-size:14px; height:28px; line-height:26px; 48px; text-align:center;}
.top_nav_box{ clear:both; 1000px; margin:0 auto;}
.top_nav{ clear:both; 100%; height:38px; line-height:38px; border-bottom:#AF0001 1px solid; border-top:#9A0000 1px solid; background:#AF0001;}
.top_nav_box h4{ float:left; 212px; color:#FFF; background:#900000; text-align:center; font-size:14px; font-weight:bold;}
.top_nav_box ul{ float:left; 780px;}
.top_nav_box ul li{ float:left; padding:0 28px; background:url(../images/line.png) no-repeat right center; font-size:14px; font-weight:bold;}
.top_nav_box ul li a{ color:#FFF;}
.top_nav_box ul li.bg_none{ background:none;}
.main_box1{ 1000px; margin:0 auto; clear:both; height:424px;}
.main_box1_left{ float:left; 210px; border:1px #D3D3D3 solid; height:424px;}
.main_box1_right{ float:left; 786px; border-bottom:1px #D3D3D3 solid; border-right:1px #D3D3D3 solid; height:425px;}
.main_box1_left dl{ 200px; height:64px; padding:6px 0 0 10px; border-bottom:1px #D3D3D3 solid;}
.main_box1_left dl dt{ height:28px; line-height:28px;}
.main_box1_left dl dt b{ padding:0 20px; font-weight:bold; color:#6A6A6A;}
.main_box1_left dl dt .b_1{ background:url(../images/ico_1.png) no-repeat left center;}
.main_box1_left dl dt .b_2{ background:url(../images/ico_2.png) no-repeat left center;}
.main_box1_left dl dd{ line-height:28px;}
.main_box1_left dl dd a{ padding-right:6px;}
.main_box1_left dl dd a:hover{ color:#C30000;}
.main_box1_left .bd_none{ border:0 none;}
.main_box1_right_1{ float:left; 628px; height:425px; border-right:1px #D3D3D3 solid;}
.main_box1_right_2{ float:left; 156px; height:425px;}
.main_box1_right_1_1{ clear:both; height:300px; border-bottom:1px #D3D3D3 solid;}
.main_box1_right_1_2{ clear:both; height:124px;}
.banner_left{ float:left; 442px; height:280px; margin-left:10px; overflow:hidden; margin-top:10px;}
.banner_left li{ float:left;}
.banner_left .ul_w{ 1880px;}
.banner_right{ float:right; 170px; height:280px; margin-top:10px;}
.banner_right .hh{ margin-top:10px; 158px; margin-left:10px;}
.banner_right .hh .h_bg{ background:url(../images/h_bg.png) no-repeat; 158px; height:36px;}
.banner_right .hh .h_bg a{ color:#FFF;}
.banner_right .hh li{ height:36px; line-height:36px; font-size:13px; 158px; border-bottom:1px #D3D3D3 solid; text-align:center;}
.banner_right .ok_but{ clear:both; height:12px; margin-top:60px; margin-left:30px;}
.banner_right .ok_but li{ float:left;}
.banner_right .ok_but .left_but{ background:url(../images/left_but.png) no-repeat; 5px; height:11px; margin-right:20px; cursor:pointer;}
.banner_right .ok_but .right_but{ background:url(../images/right_but.png) no-repeat; 5px; height:11px; margin-left:20px; cursor:pointer;}
.banner_right .ok_but .ok_ok{ background:url(../images/ok.png) no-repeat; 8px; height:11px; margin:0 20px; cursor:pointer;}
.box1_1{ float:left; 313px; border-right:1px #D3D3D3 solid;}
.box1_2{ float:left; 314px}
.box1_1 .b_left{ float:left; background:url(../images/b_left.png) no-repeat; 9px; height:16px; display:block; margin:50px 6px 0 4px; cursor:pointer;}
.box1_1 .b_right{ float:left; background:url(../images/b_right.png) no-repeat; 9px; height:16px; display:block; margin:50px 4px 0 6px; cursor:pointer;}
.box1_1 .bn_w{ float:left; 273px; margin-top:2px; overflow:hidden; height:119px; position:relative;}
.box1_1 .ul_ww{ 1400px;}
.box1_1 .ul_ww li{ float:left;}
.num_i{ 40px; height:20px; position:absolute; left:10px; bottom:4px;}
.num_i span{ font-weight:bold; color:#333333;}
.num_i b{ color:#333132; font-weight:normal;}
.num_ii{ 40px; height:20px; position:absolute; left:10px; bottom:4px;}
.num_ii span{ font-weight:bold; color:#333333;}
.num_ii b{ color:#333132; font-weight:normal;}
.box1_2 .b_leftw{ float:left; background:url(../images/b_left.png) no-repeat; 9px; height:16px; display:block; margin:50px 6px 0 4px; cursor:pointer;}
.box1_2 .b_rightw{ float:left; background:url(../images/b_right.png) no-repeat; 9px; height:16px; display:block; margin:50px 4px 0 6px; cursor:pointer;}
.box1_2 .bn_ww{ float:left; 273px; margin-top:2px; overflow:hidden; height:119px; position:relative;}
.box1_2 .ul_www{ 1400px;}
.box1_2 .ul_www li{ float:left;}
.main_box1_right_2 ul{ 156px; height:167px; border-bottom:1px #D3D3D3 solid; background:#FFF79A;}
.main_box1_right_2 ul li{ float:left; 78px; height:78px; text-align:center; line-height:22px; *line-height:30px;}
.main_box1_right_2 ul li img{ margin-top:10px;}
.banner_x{ clear:both; 128px; overflow:hidden; height:178px; margin-left:14px; margin-top:6px;}
.banner_x .bn{ clear:both; 520px; background:none; border:0 none;}
.banner_x .bn li{ float:left; 128px;}
.num_bg{ clear:both; height:20px; 120px; margin:40px 0 0 20px;}
.num_bg li{ cursor:pointer; 19px; height:6px; background:#CCCCFE; float:left; margin:0 5px;}
.num_bg .h_b{ background:#900000; height:8px;}
.main_box2{ clear:both; 100%; height:436px; background:#EEEEEE; margin-top:20px;}
.main_2{ 1000px; margin:0 auto;}
.main_2_1{ float:left; 637px;}
.main_2_2{ float:left; 360px;}
// JavaScript Document
$(document).ready(function(e) {
//banner
var oWidth=$('.banner_left').width(),
repeat,
index=0,
len=$('.ul_w li').length;
//console.log(len)
$('.hh li').mouseover(function(){
index=$('.hh li').index(this);
ht(index)
})
$('.main_box1_right_1_1').hover(function(){
clearInterval( repeat )
},function(){
repeat=setInterval(function(){
index++;
if(index==len)
index=0;
ht(index)
},2000);
}).trigger('mouseout');
$('.right_but').click(function(){
index+=1;
if(index>=len){index=0;}
ht(index);
})
$('.left_but').click(function(){
index-=1;
if(index<0){ index=len-1}
ht(index);
})
//but
/* $('.left_but').click(function(){
$('.ul_w').animate({'marginLeft':-oWidth},500,function(){
var firstli=$( ".ul_w li:first" );
firstli.appendTo( ".ul_w" );
$( ".ul_w" ).css({"marginLeft":0});
});
});
$('.right_but').click(function(){
var lastli=$( ".ul_w li:last" );
lastli.prependTo( ".ul_w" );
$( ".ul_w" ).css({"marginLeft":-oWidth});
$('.ul_w').animate({'marginLeft':0},500)
});*/
function ht(){
$('.ul_w').stop().animate({'marginLeft':-oWidth*index})
$('.hh li').eq(index).addClass('h_bg').siblings().removeClass('h_bg');
};
var ww=$('.bn_w').width();
var num=0;
var li_length=$('.ul_ww li').length;
$('.num_i b').text(li_length);
$('.b_left').click(function(){
$('.ul_ww').animate({'marginLeft':-ww},500,function(){
var firstli=$( ".ul_ww li:first" );
firstli.appendTo( ".ul_ww" );
$( ".ul_ww" ).css({"marginLeft":0});
});
num++;
if(num>=li_length){ num=0;}
$(".num_i span").text((num+1));
});
$('.b_right').click(function(){
var lastli=$( ".ul_ww li:last" );
lastli.prependTo( ".ul_ww" );
$( ".ul_ww" ).css({"marginLeft":-ww});
$('.ul_ww').animate({'marginLeft':0},500);
num--;
if(num<0){ num=li_length-1;}
$(".num_i span").text((num+1));
});
var www=$('.bn_ww').width();
var numi=0;
var li_lengthi=$('.ul_www li').length;
$('.num_ii b').text(li_lengthi);
$('.b_leftw').click(function(){
$('.ul_www').animate({'marginLeft':-www},500,function(){
var firstli=$( ".ul_ww li:first" );
firstli.appendTo( ".ul_www" );
$( ".ul_www" ).css({"marginLeft":0});
});
numi++;
if(numi>=li_lengthi){ numi=0;}
$(".num_ii span").text((numi+1));
});
$('.b_rightw').click(function(){
var lastli=$( ".ul_www li:last" );
lastli.prependTo( ".ul_www" );
$( ".ul_www" ).css({"marginLeft":-www});
$('.ul_www').animate({'marginLeft':0},500);
numi--;
if(numi<0){ numi=li_lengthi-1;}
$(".num_ii span").text((numi+1));
});
//right_banner
var img_w=$('.banner_x').width();
var img_length=$('.bn li').length;
var shij,indexc=0;
//alert( img_length )
function yund(){
$('.bn').stop().animate({'marginLeft':-img_w*indexc});
$('.num_bg li').eq(indexc).addClass('h_b').siblings().removeClass('h_b');
}
$('.banner_x').hover(function(){
clearInterval(shij)
},function(){
shij=setInterval(function(){
indexc++;
if(indexc==img_length){
indexc=0;
};
yund(indexc);
},2000)
}).trigger('mouseout');
$('.num_bg li').mouseover(function(){
indexc=$('.num_bg li').index( this )
yund(indexc);
clearInterval(shij);
}).mouseout(function(){
shij=setInterval(function(){
indexc++;
if(indexc==img_length){
indexc=0;
};
yund(indexc);
},2000)
}
)
});