網(wǎng)頁前臺(tái)瀏覽圖片功能（動(dòng)態(tài)）

2019-11-17 01:36:12

字體：大中小

供稿：網(wǎng)友

網(wǎng)頁前臺(tái)瀏覽圖片功能（動(dòng)態(tài)）

<!DOCTYPE html />  //這是html5的開頭寫法，其他格式的也可以 但若不加上dtd協(xié)議 頁面布局會(huì)亂<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><style type="text/CSS"><!--.rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;}.rollBox .LeftBotton{height:52px;width:19px;background:url(image/job_mj_069.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}.rollBox .RightBotton{height:52px;width:20px;background:url(image/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}.rollBox .Cont{width:530px;overflow:hidden;float:left;}.rollBox .ScrCont{width:10000000px;}.rollBox .Cont .pic{width:132px;float:left;text-align:center;}.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}.rollBox .Cont .pic p{line-height:26px;color:#505050;}.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}.rollBox #List1,.rollBox #List2{float:left;}--></style><script type="text/javascript">        var pathArray;    function ShowFolderFileList() {         pathArray = new Array();    //因?yàn)橛行g覽器考慮到安全問題 拒絕網(wǎng)頁直接訪問本地的文件夾 所以我給一個(gè)固定的數(shù)組         pathArray.push("image/1.jpg");        pathArray.push("image/2.jpg");        pathArray.push("image/3.jpg");        pathArray.push("image/4.jpg");        pathArray.push("image/5.jpg");        pathArray.push("image/6.jpg");        pathArray.push("image/7.jpg");        pathArray.push("image/8.jpg");        pathArray.push("image/9.jpg");        pathArray.push("image/10.jpg");        getImage();    }//兩次效果的不同在于要重復(fù)的對(duì)動(dòng)態(tài)生成的控件進(jìn)行刪除和添加    function ShowFolderFileLists() {        pathArray = new Array();        pathArray.push("image/1.jpg");        pathArray.push("image/2.jpg");        pathArray.push("image/2.jpg");        pathArray.push("image/3.jpg");        pathArray.push("image/3.jpg");        pathArray.push("image/4.jpg");        pathArray.push("image/4.jpg");        pathArray.push("image/5.jpg");        pathArray.push("image/5.jpg");        pathArray.push("image/6.jpg");        getImage();    }    function getImage() {        try {            //刪除要素控件            document.getElementById("partend").removeChild(document.getElementById("List1"));            var divParents = document.createElement("div");            divParents.setAttribute("id", "List1");            //添加要素控件            document.getElementById("partend").appendChild(divParents);            for (var i = 0; i < pathArray.length; i++) {             //創(chuàng)建div                var divParent = document.createElement("div");                divParent.setAttribute("id", i);                divParent.setAttribute("class", "pic");                document.getElementById("List1").appendChild(divParent);                //創(chuàng)建圖片控件                var images = document.createElement("img");                images.setAttribute("src", pathArray[i].toString());                images.setAttribute("width", "109");                images.setAttribute("height", "87");                images.setAttribute("alt", "logo");                document.getElementById(i).appendChild(images);            }        }        catch (err) {alert(err.Description);}    }  </script>    </head> <body><div><input type="button" value="效果二" onclick="ShowFolderFileLists()" /><input type="button" value="效果一"onclick="ShowFolderFileList()" /></div><div class="rollBox">     <div class="LeftBotton" onMouseDown="ISL_GoUp()" onMouseUp="ISL_StopUp()" onMouSEOut="ISL_StopUp()"></div>     <div class="Cont" id="ISL_Cont">      <div class="ScrCont" id="partend">       <div id="List1">       </div>            </div>     </div>     <div class="RightBotton" onMouseDown="ISL_GoDown()" onMouseUp="ISL_StopDown()" onMouseOut="ISL_StopDown()"></div>    </div>   </div>   <script language="Javascript" type="text/javascript"><!--    //--><![CDATA[//><!-- n    //圖片滾動(dòng)列表 mengjia 070816    var Speed = 1; //速度(毫秒)    var Space = 5; //每次移動(dòng)(px)    var PageWidth = 528; //翻頁寬度    var fill = 0; //整體移位    var MoveLock = false;    var MoveTimeObj;    var Comp = 0;    var AutoPlayObj = null;    GetObj('ISL_Cont').scrollLeft = fill;//    GetObj("ISL_Cont").onmouseover = function () { clearInterval(AutoPlayObj); }//    GetObj("ISL_Cont").onmouseout = function () { AutoPlay(); }//    AutoPlay();    function GetObj(objName) {        if (document.getElementById)         { return eval('document.getElementById("' + objName + '")') }       else { return eval('document.all.' + objName) } }//     function AutoPlay() { //自動(dòng)滾動(dòng)//        clearInterval(AutoPlayObj);//        AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();', 3000); //間隔時(shí)間//    }    function ISL_GoUp() { //上翻開始        if (MoveLock) return;        clearInterval(AutoPlayObj);        MoveLock = true;        MoveTimeObj = setInterval('ISL_ScrUp();', Speed);    }    function ISL_StopUp() { //上翻停止        clearInterval(MoveTimeObj);        if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0)         {            Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);            CompScr();        }         else {            MoveLock = false;        }//        AutoPlay();    }    function ISL_ScrUp() { //上翻動(dòng)作        if (GetObj('ISL_Cont').scrollLeft <= 0)         { GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth }        GetObj('ISL_Cont').scrollLeft -= Space;    }    function ISL_GoDown() { //下翻        clearInterval(MoveTimeObj);        if (MoveLock) return;        clearInterval(AutoPlayObj);        MoveLock = true;        ISL_ScrDown();        MoveTimeObj = setInterval('ISL_ScrDown()', Speed);    }    function ISL_StopDown() { //下翻停止        clearInterval(MoveTimeObj);        if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {            Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;            CompScr();        } else {            MoveLock = false;        }//        AutoPlay();    }    function ISL_ScrDown() { //下翻動(dòng)作        if (GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth)         { GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth; }         GetObj('ISL_Cont').scrollLeft += Space;    }    function CompScr() {        var num;        if (Comp == 0) { MoveLock = false; return; }        if (Comp < 0) { //上翻            if (Comp < -Space) {                Comp += Space;                num = Space;            } else {                num = -Comp;                Comp = 0;            }            GetObj('ISL_Cont').scrollLeft -= num;            setTimeout('CompScr()', Speed);        } else { //下翻            if (Comp > Space) {                Comp -= Space;                num = Space;            } else {                num = Comp;                Comp = 0;            }            GetObj('ISL_Cont').scrollLeft += num;            setTimeout('CompScr()', Speed);        }    }    //--><!]]></script>  </body></html>效果圖：QQwXAPLBfZTLZRx999Omnn/7ro+DTTz/96KOPZDLZg9f8WC4KBAKBQA+VL+lXkUj0l7/85ZuumP+Gv/zlLyKR6MFrfiwXBQKBQKCHypf365///OffPTr+/Oc/b6RfH79FgUAgEOihsqF+/ZcNAADgAR/+n9l4v27k2R6hRYFAIBDooQJg9F/er7/dGAAA/uHxF0/+v2zwJb7Uxvt1g0/4qCwKBAKBQA8VAKMnPuBukUj06aef/vqB/muv3D/5Dx/5pcf/8Am/+MwP9umnn26kX//vF/U/sZFFgUAgEOihAmB0hAfcfb+KPv7v+2Iz/cOTf+crvMQ/tPF