图片浏览（附带样式+效果）

查看多张图片时，许多网站都用了简洁美观的处理方法，自己也学着扒了一点，希望以后用的时候能够少费点时间再去研究。

<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>

以上是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;}

效果：

posted @ 2013-03-29 14:26 dreamfly_cc 阅读(1264) 评论(6) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

dreamfly_cc

图片浏览（附带样式+效果）

公告