标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/Xuman0927/p/5731488.html
