未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
图片浏览(附带样式+效果)

2015.10.18

关注
<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>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP阅读全文并永久保存 更多类似文章
猜你喜欢
类似文章
图片轮播代码2(html)
原生js实现图片切换
jquery瀑布流布局(masonry.js)
【网页特效】小巧玲珑的网页中的常用的小日历
网页制作中常用的几个简单的选项卡特效代码(很实用)
【图片特效】JS水纹切片特效的多幅图片切换效果
更多类似文章 >>
生活服务
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!