 <html xmlns="http://www./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>
|
