<!DOCTYPE html >
<html lang="zh-Ch">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.timers.js" language="javascript"></script>
<style type="text/css">
#zhucai{width:996px; margin:auto;height:828px; overflow:hidden;}
.zc1{height:336px;width:949px; margin:auto; position:relative;}
.zc2{width:949px; margin:auto; position:relative;}
.rzsj{ position:absolute; z-index:-1; left:63px; top:-45px;}
.zc4{ margin:0px 66px 0px 63px;min-height:215px; height:auto !important;_height:215px; padding-top:1px;}
.zc3{ background:url(../images/zhucai/zc_47.jpg) repeat-y;}
.zc3 ul li{ display:inline; float:left; margin-right:1px; height:35px; margin-bottom:1px; overflow:hidden;width:62px;}
/**/
.fwlc{}
.fwlc1{ padding-left:80px;width:225px; float:left; padding-top:57px;}
.fwlc2{ float:right;width:610px;}
.bztext{ color:#333;}
.bztext p{ font-size:14px;}
.thub{ text-align:center; padding-top:12px;}
.thub img{margin:0px 10px;}
.btn_z{ position:absolute; left:0; top:20px; z-index:1;}
.btn_y{ position:absolute; right:0; top:20px; z-index:1;}
.box{
width:760px;
height:280px;
position:relative;
overflow:hidden;
margin: 0 auto;
}
.box .boxlist{
width:4560px;
height:280px;
position:absolute;
left:0px;
text-align: center;
}
.serverblock{
width:760x;
height:280px;
margin: 0px auto;
float: left;
}
.fwlc1_1{ width:200px; float:left;margin-top: 57px;}
.fwlc2_1{ float:left;width:560px;}
</style>
<script language="javascript">
$(function(){
var w=$("#boxlist>.serverblock").width();//每一个切换的div宽度
var pages=1; //初始运行第一个div
var imglength=$("#boxlist>.serverblock").length;//切换div的总个数
var cur = pages; //当前运行的div
$("#boxlist").everyTime("3s","a",auto);
function auto(){
if(pages<imglength){
$("#boxlist").animate({left:"-"+w * pages},500);
pages++;
}
else{
pages=1;
$("#boxlist").animate({left:"0px"},500);
}
cur=pages;
}
$("#thubnum>img").click(function(){
pages=$("#thubnum>img").index(this);
$("#boxlist").animate({left:"-"+w * pages},500);
cur=pages;
});
$("#leftpic").click(function(){
$("#boxlist").stopTime("a");
pages=pages+1;
if(pages<imglength){
$("#boxlist").animate({left:"-"+w * pages},300);
}else{
$("#boxlist").animate({left:"-"+w*(imglength-1)},300);
}
$("#boxlist").everyTime("3s","a",auto);
});
$("#rightpic").click(function(){
$("#boxlist").stopTime("a");
pages=pages-1;
if(pages<imglength){
$("#boxlist").animate({left:"-"+w * pages},300);
}else{
$("#boxlist").animate({left:"0px"},300);
}
$("#boxlist").everyTime("3s","a",auto);
});
});
</script>
</head>
</body>
</html>
</head>
<body >
<div id="zhucai">
<div class="zc1 webwidget_slideshow_dot" >
<!--服务流程开始-->
<div class="fwlc">
<div class="box">
<div class="boxlist" id="boxlist">
<div class="serverblock">
<div class="fwlc1_1">
<img src="images/zhucai/one.png" width="144" height="55" />
<div class="bztext"><p>配饰成列设计图</p>天古设计师将根据业主的个性需求，设计并推荐主材全类别的设计产品，制作出含产品规格、材质、色彩等信息的精美实物大图画册——《天古高级定制设计配饰陈列图》，以供业主确认方案。</div>
</div>
<div class="fwlc2_1"><img src="images/zhucai/one_img.png" width="495" height="285" /></div>
</div>
<div class="serverblock">
<div class="fwlc1_1">
<img src="images/zhucai/two.png" width="144" height="55" />
<div class="bztext"><p>配饰成列设计图</p>天古设计师将根据业主的个性需求，设计并推荐主材全类别的设计产品，制作出含产品规格、材质、色彩等信息的精美实物大图画册——《天古高级定制设计配饰陈列图》，以供业主确认方案。</div>
</div>
<div class="fwlc2_1"><img src="images/zhucai/two_img.png" width="495" height="285" /></div>
</div>
<div class="serverblock">
<div class="fwlc1_1">
<img src="images/zhucai/three.png" width="144" height="55" />
<div class="bztext"><p>配饰成列设计图</p>主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求</div>
</div>
<div class="fwlc2_1"><img src="images/zhucai/three_img.png" width="495" height="285" /></div>
</div>
<div class="serverblock">
<div class="fwlc1_1">
<img src="images/zhucai/four.png" width="144" height="55" />
<div class="bztext"><p>配饰成列设计图</p>主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求。</div>
</div>
<div class="fwlc2_1"><img src="images/zhucai/four_img.png" width="495" height="285" /></div>
</div>
<div class="serverblock">
<div class="fwlc1_1">
<img src="images/zhucai/five.png" width="144" height="55" />
<div class="bztext"><p>配饰成列设计图</p>主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求</div>
</div>
<div class="fwlc2_1"><img src="images/zhucai/five_img.png" width="495" height="285" /></div>
</div>
<div class="serverblock">
<div class="fwlc1_1">
<img src="images/zhucai/six.png" width="144" height="55" />
<div class="bztext"><p>配饰成列设计图</p>主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求主的个性需求</div>
</div>
<div class="fwlc2_1"><img src="images/zhucai/six_img.png" width="495" height="285" /></div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="thub" id="thubnum">
<img src="images/01.png" width="31" height="17" />
<img src="images/02.png" width="31" height="17" />
<img src="images/03.png" width="31" height="17" />
<img src="images/04.png" width="31" height="17" />
<img src="images/05.png" width="31" height="17" />
<img src="images/06.png" width="31" height="17" />
</div>
</div>
<div class="btn_z" id="leftpic"><img src="images/zhucai/left.png" width="21" height="264" /></div>
<div class="btn_y" id="rightpic"><img src="images/zhucai/right.png" width="21" height="264" /></div>
<!--服务流程结束-->
</body>
</html>