查看多张图片时，许多网站都用了简洁美观的处理方法，自己也学着扒了一点，希望以后用的时候能够少费点时间再去研究。
<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;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; 50px;background:url(../img/arrow_1.jpg) no-repeat center center;margin:190px auto;} .prev_1_b{display:block;cursor:pointer;height: 84px; 50px;background:url(../img/arrow_2.jpg) no-repeat center center;margin:190px auto;} .prev_1_c{display:block;cursor:pointer;height: 104px; 16px;background:url(../img/qcimg_list_left.jpg) no-repeat center center;} .prev_1_d{display:block;cursor:pointer;height: 104px; 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>
以上是html页面，代码复制过去加上图片直接就能用。
两个css文件
1.common.cs
/* ---------------- CSS reset css重置 ---------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0;padding:0;font-family:Tahoma,"宋体",Arial,sans-serif;font-size:12px;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal} strong{font-weight:normal;} ol,ul {list-style:none} caption,th {text-align:left} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} abbr,acronym { border:0} div{overflow:hidden;} img{border-width:0px;} a{ text-decoration:none;color:#333;} a:hover{ text-decoration:underline;} input,select{vertical-align: middle;} .mt8{margin-top:8px;} .mb8{margin-bottom: 8px;} .bb_CECCCD{border-bottom: #CECCCD 1px solid;} .ml2{margin-left: 2px;} .mt0{margin-top: 0 !important;} .pl0{padding-left: 0 !important;} .fl{float: left;}
2.list.cs
/* 汽车图片 */ .qcimg_title{width: 1000px;margin:0 auto;text-align: center;margin-top: 50px;margin-bottom: 20px;} .qcimg_title h2{font-size: 22px;} .qcimg_left,.qcimg_right{width: 60px;float: left;height: 466px;} .qcimg_body{margin: 0 auto;height: 466px;width: 810px;} .qcimg_img{width: 676px;height: 452px;float: left;} .qcimg_img img{width: 676px;height: 452px;} .qcimg_list{height: 104px;width: 688px;border:1px solid #6b6768;margin: 0 auto;margin-top: 2px;} .qcimg_list_left,.qcimg_list_right{float: left;width:16px;height: 104px;} .qcimg_list_body{float: left;width:655px;} .qcimg_list_right{float: right;} .qcimg_list_body ul li{float: left;margin: 0 5px;padding-top: 14px;} .qcimg_list_body ul li img{width: 115px;height: 70px;border:3px solid #CCCCCC;} .qcimg_list_li{background: url(../img/qcimg_list_li.gif) no-repeat center 5px;} .qcimg_list_li img{border:3px solid #1BB2D9 !important;}
效果：
