<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0037)http://www.shzhixun.net/platform.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
body{ margin:0px; padding:0px; min-width: 1210px; color:#6f6f6f; font-family:"微软雅黑", "宋体", Arial, "Times New Roman", sans-serif;}
.bai{ background:#FFF; margin:0px; padding:0px;}
a{ text-decoration:none; color:#393939;}
a:hover{ text-decoration: none; color:#f39800;}
/*html {overflow-y:scroll;overflow-x:hidden;overflow:-moz-scrollbars-vertical}*/
/*删除火狐下按钮默认样式*/
input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
border:none;
padding:0px;
margin:0px;
}
/*浮动*/
.clearboth { clear:both;}
.float_l { float:left; display:inline;}
.float_r { float:right; display:inline;}
img {vertical-align:middle;}
ul, li { list-style:none; margin:0; padding:0;}
form, div, body, img, p, a, img, dl, dd, dt, table, tr, td, th,input { margin:0px; padding:0px; border:0;}
.pingtai_con{ width:1210px; min-height:350px; margin:0px auto; margin-top:15px; margin-bottom:30px; background:#CCC;}
.mod18{width:1210px;min-height:350px;margin:20px auto;position:relative;background:#fff}
.mod18 .btn{position:absolute;width:44px;height:70px;top:16px;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
.mod18 .prev{/*left:0;background:url(images/prevBtn.png) no-repeat;*/background:#f00}
.mod18 #prevTop,.mod18 #nextTop{top:400px;width:46px;height:48px;}
.mod18 #prevTop{/*background:url(images/prevBtnTop.png) 0 0 no-repeat;*/ background:#060}
.mod18 #nextTop{/*background:url(images/nextBtnTop.png) 0 0 no-repeat;*/background:#060}
.mod18 .next{right:0;background:url(images/nextBtn.png) no-repeat;background:#f00}
.mod18 li{float:left;}
.mod18 .cf li{position:relative;color:#333;}
.mod18 .cf a{display:block;width:680px;height:330px;position:absolute;color:#333;}
.mod18 .cf li span{display:block;width:640px;position:absolute;left:0;bottom:0;padding:10px 20px;line-height:22px;text-align:left;background:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
.mod18 .picBox{min-height:720px;position:relative;overflow:hidden;}
.mod18 .picBox ul{position:absolute;}
.mod18 .picBox li{width:1210px;min-height:330px;}
.mod18 .listBox{width:1122px;height:50px;margin:0 auto 10px auto;position:relative;padding:16px 0 0px;overflow:hidden;}
.mod18 .listBox ul{height:60px;position:absolute;}
.mod18 .listBox li{width:170px;height:47px;cursor:pointer;position:relative;text-align:center;line-height:48px;font-size:16px;font-family:"微软雅黑";
background:#000;color:#fff;padding:0 8px;}
.mod18 .listBox li i{display:none;}
.mod18 .listBox li a{display:block;width:124px;height:70px;}
.mod18 .listBox li img{width:124px;height:70px;}
.mod18 .listBox .on {width:170px;height:47px;color:#393939;background:#0F0 ;}
.mod18 .listBox .on i{display:block;}
</style>
</head>
<body>
<div class="pingtai_con">
<div class="mod18"> <span id="prev" class="btn prev"></span> <span id="next" class="btn next"></span> <span id="prevTop" class="btn prev"></span> <span id="nextTop" class="btn next"></span>
<div id="listBox" class="listBox">
<ul class="cf">
<li class="on"><i class="arr2"></i>Art021</li>
<li class=""><i class="arr2"></i>纳惠贸易</li>
<li class=""><i class="arr2"></i>舒舒电商</li>
<li class=""><i class="arr2"></i>52创梦园</li>
<li class=""><i class="arr2"></i>爱徒奢华之家</li>
<li class=""><i class="arr2"></i>上海衷鑫装饰设计工程有限公司</li>
<li class=""><i class="arr2"></i>尚秦艺术</li>
<li class=""><i class="arr2"></i>亚鸿企业集团</li>
<li class=""><i class="arr2"></i>上海铭鸿装潢</li>
<li class=""><i class="arr2"></i>上海欧居投资咨询</li>
<li class=""><i class="arr2"></i>上海靓车会</li>
<li class=""><i class="arr2"></i>优行商旅</li>
<li class=""><i class="arr2"></i>上海仁捷视听</li>
<li class=""><i class="arr2"></i>善明企划</li>
</ul>
</div>
<div id="picBox" class="picBox">
<ul class="cf" >
<li>
<p>11111</p>
</li>
<li>
<p>11111</p>
</li>
<li>
<p>11111</p>
</li>
<li>
<p>111111111</p>
</li>
<li>
<p>11111111111</p>
</li>
<li>
<p>111111</p>
</li>
<li>
<p>22222222222222</p>
</li>
<li>
<p>5555555555</p>
</li>
<li>
<p>66666666666</p>
</li>
<li>
<p>777777777777</p>
</li>
<li>
<p>9999999999999</p>
</li>
<li>
<p>3333333333333</p>
</li>
<li>
<p>44444444444444444444</p>
</li>
<li>
<p>5555555555555555555</p>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
(function(){
function G(s){
return document.getElementById(s);
}
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
function Animate(obj, json){
if(obj.timer){
clearInterval(obj.timer);
}
obj.timer = setInterval(function(){
for(var attr in json){
var iCur = parseInt(getStyle(obj, attr));
iCur = iCur ? iCur : 0;
var iSpeed = (json[attr] - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
obj.style[attr] = iCur + iSpeed + 'px';
if(iCur == json[attr]){
clearInterval(obj.timer);
}
}
}, 30);
}
var oPic = G("picBox");
var oList = G("listBox");
var oPrev = G("prev");
var oNext = G("next");
var oPrevTop = G("prevTop");
var oNextTop = G("nextTop");
var oPicLi = oPic.getElementsByTagName("li");
var oListLi = oList.getElementsByTagName("li");
var len1 = oPicLi.length;
var len2 = oListLi.length;
var oPicUl = oPic.getElementsByTagName("ul")[0];
var oListUl = oList.getElementsByTagName("ul")[0];
var w1 = oPicLi[0].offsetWidth;
var w2 = oListLi[0].offsetWidth;
oPicUl.style.width = w1 * len1 + "px";
oListUl.style.width = w2 * len2 + "px";
var index = 0;
var num = 5;
var num2 = Math.ceil(num / 2);
function Change(){
Animate(oPicUl, {left: - index * w1});
if(index < num2){
Animate(oListUl, {left: 0});
}else if(index + num2 <= len2){
Animate(oListUl, {left: - (index - num2 + 1) * w2});
}else{
Animate(oListUl, {left: - (len2 - num) * w2});
}
for (var i = 0; i < len2; i++) {
oListLi[i].className = "";
if(i == index){
oListLi[i].className = "on";
}
}
}
oNextTop.onclick = oNext.onclick = function(){
index ++;
index = index == len2 ? 0 : index;
Change();
}
oPrevTop.onclick = oPrev.onclick = function(){
index --;
index = index == -1 ? len2 -1 : index;
Change();
}
for (var i = 0; i < len2; i++) {
oListLi[i].index = i;
oListLi[i].onclick = function(){
index = this.index;
Change();
}
}
})()
</script>
</div>
</body>
</html>
