<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>图片浏览</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link href="../css/common.css" rel="stylesheet" type="text/css" /> <link href="../css/list.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .qcimg_ba_a{height:458px;width:682px;border:1px solid #908D8E;padding-left:6px;padding-top:6px;float:left;} .qcimg_img{position: relative;} .qcimg_img ul{position: absolute;} .qcimg_img li{float: left;position: relative;} .prev_1_a{display:block;cursor:pointer;height: 84px;width: 50px;background:url(../img/arrow_1.jpg) no-repeat center center;margin:190px auto;} .prev_1_b{display:block;cursor:pointer;height: 84px;width: 50px;background:url(../img/arrow_2.jpg) no-repeat center center;margin:190px auto;} .prev_1_c{display:block;cursor:pointer;height: 104px;width: 16px;background:url(../img/qcimg_list_left.jpg) no-repeat center center;} .prev_1_d{display:block;cursor:pointer;height: 104px;width: 16px;background:url(../img/qcimg_list_right.jpg) no-repeat center center;} </style></head><body> <div class="qcimg_dt"> <div class="qcimg_title"> <h2> 车辆图片展示</h2> </div> <div class="qcimg_body"> <div class="qcimg_left"> <span id="prev" class="prev_1_a prev"></span> </div> <div class="qcimg_ba_a"> <div class="qcimg_img" id="picBox"> <ul> <li class=""> <img src="../Images/0.jpg" alt="" /> </li> <li class=""> <img src="../Images/1.jpg" alt="" /> </li> <li class=""> <img src="../Images/2.jpg" alt="" /> </li> <li class=""> <img src="../Images/3.jpg" alt="" /> </li> <li class=""> <img src="../Images/4.jpg" alt="" /> </li> <li class=""> <img src="../Images/5.jpg" alt="" /> </li> </ul> </div> </div> <div class="qcimg_right"> <span id="next" class="prev_1_b next"></span> </div> </div> <div class="qcimg_list"> <div class="qcimg_list_left"> <span id="prevTop" class="prev_1_c prev"></span> </div> <div id="listBox" class="qcimg_list_body"> <ul> <li class=""> <img src="../Images/0.jpg" alt="" /> </li> <li class=""> <img src="../Images/1.jpg" alt="" /> </li> <li class=""> <img src="../Images/2.jpg" alt="" /> </li> <li class=""> <img src="../Images/3.jpg" alt="" /> </li> <li class=""> <img src="../Images/4.jpg" alt="" /> </li> <li class=""> <img src="../Images/5.jpg" alt="" /> </li> </ul> </div> <div class="qcimg_list_right"> <span id="nextTop" class="prev_1_d next"></span> </div> </div> </div></body><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 = "qcimg_list_li"; } } } 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></html>
联系客服