·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 网页前台浏览图片功能（动态）
- 脚本获取选中文字及所在句子
- 让网站不停止，永远持续运行
- 利用JS在asp.net中实现左导航页的隐藏
- 第三篇：属性_第一节：控件属性与属性的持久化
- 在线银联之实例操作
- 基于ASP.NET的Web动态控件创建
- Quartz.NET2.0作业调度框架使用
- C#操作json类型数据
- MICROSOFT REPORT VIEWER 2012之无法加载相关的dll
- 设计模式-工厂模式
- Microsoft dotnetConf 2015 一些整理
- 对C#中的Close()和Dispose()的浅析
- 【.NET基础】--委托、事件、线程（3）
- SQL 语句及关键字的用法
- 精彩 .NET 2015
- 通过代码给IIS增加主机头
- 提高jQuery执行效率
- Windows10系统.NETFramework3.5离线安装方法
- ASP.NET—From验证：全部代码及讲解
- EULA：微软的法宝
- ASP.NET讲座(3)-输入验证控件
- DataGrid与SQL Server 2000数据绑定
- Asp.Net中文本换行
- 將後台的Json數據返回到前台
- 一个在移动设备中获取路径的方法
- 大型网站系统架构设计主要要素：聊聊架构一
- ASP.NETMVC下使用文件上传
- 通过winmm.dll控制声音播放
- AD帐户操作C#示例代码（一）——导入用户信息
- 在ASP.NET应用程序中捕捉身份验证状态的变化
网页前台浏览图片功能（动态）
作者：佚名 ASP.NET网站开发编辑：admin 更新时间：2022-07-23
网页前台浏览图片功能（动态）
<!DOCTYPE html /> //这是html5的开头写法，其他格式的也可以 但若不加上dtd协议 页面布局会乱<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(); //因为有些浏览器考虑到安全问题 拒绝网页直接访问本地的文件夹 所以我给一个固定的数组 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(); }//两次效果的不同在于要重复的对动态生成的控件进行删除和添加 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++) { //创建div var divParent = document.createElement("div"); divParent.setAttribute("id", i); divParent.setAttribute("class", "pic"); document.getElementById("List1").appendChild(divParent); //创建图片控件 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 //图片滚动列表 mengjia 070816 var Speed = 1; //速度(毫秒) var Space = 5; //每次移动(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() { //自动滚动// clearInterval(AutoPlayObj);// AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();', 3000); //间隔时间// } 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() { //上翻动作 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() { //下翻动作 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>效果图：