求教如何将一款左右滚动的图片js特效修改成由左右按钮控制的滚动图片特js特效

问题描述

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>自动轮播代码</title></head><styletype="text/css">.rollBox{width:704px;overflow:hidden;padding:12px05px6px;}.rollBox.LeftBotton{height:30px;width:19px;background:url(/images/btn_arrow_left.gif)no-repeat4px0;overflow:hidden;float:left;display:inline;margin:25px000;cursor:pointer;}.rollBox.RightBotton{height:52px;width:26px;background:url(/images/btn_arrow_right.gif)no-repeat4px0;overflow:hidden;float:left;display:inline;margin:25px000;cursor:pointer;}.rollBox.Cont{width:330px;overflow:hidden;float:left;}.rollBox.ScrCont{width:10000000px;}.rollBox.Cont.pic{width:80px;float:left;text-align:center;}.rollBox.Cont.picimg{padding:4px;background:#fff;border:1pxsolid#ccc;display:block;margin:0auto;}.rollBox.Cont.picp{line-height:26px;color:#505050;}.rollBox.Conta:link,.rollBox.Conta:visited{color:#626466;text-decoration:none;}.rollBox.Conta:hover{color:#f00;text-decoration:underline;}.rollBox#List1,.rollBox#List2{float:left;}</style><body><formid="form1"name="form1"method="post"action=""><%DimconnDB_ServerName="(local)SQLEXPRESS"'数据库名称(IP+实例名)DB_UserName="sa"'SQL用户名DB_PassWord="jacky.com"'SQL用户密码DB_DateBase="WEBSITE"'数据库名DB_Provider="SQLNCLI"'驱动程序sql="Provider="&DB_Provider&";UID="&DB_UserName&";Pwd="&DB_PassWord&";database="&DB_DateBase&";Server="&DB_ServerName&";"SetConn=Server.CreateObject("ADODB.Connection")Conn.Opensql%><divclass="rollBox"><divclass="LeftBotton"onMouseDown="ISL_GoUp()"onMouseUp="ISL_StopUp()"onMouseOut="ISL_StopUp()"></div><divclass="Cont"id="ISL_Cont"><divclass="ScrCont"><divid="List1"><!--图片列表begin--><%sql_luobo="select*from[website].[dbo].[pro]whereshowindex<>0orderbyberdesc"Setrs_luobo=conn.Execute(sql_luobo)whilenotrs_luobo.eof%><divclass="pic"><ahref="product/default.asp?prober=<%=rs_luobo("ber")%>"target="_blank"><imgsrc='<%=rs_luobo("photos22")%>'height="70"onload="returnimgzoom(this,600);style="cursor:pointer;"/></a></div><%rs_luobo.MoveNextwendrs_luobo.Closesetrs_luobo=nothing%></div><divid="List2"></div></div></div><divclass="RightBotton"onMouseDown="ISL_GoDown()"onMouseUp="ISL_StopDown()"onMouseOut="ISL_StopDown()"></div></div></div><scriptlanguage="javascript"type="text/javascript">varSpeed=0;//速度(毫秒)varSpace=1;//每次移动(px)varPageWidth=528;//翻页宽度varfill=0;//整体移位varMoveLock=false;varMoveTimeObj;varComp=0;varAutoPlayObj=null;GetObj("List2").innerHTML=GetObj("List1").innerHTML;GetObj('ISL_Cont').scrollLeft=fill;GetObj("ISL_Cont").onmouseover=function(){clearInterval(AutoPlayObj);}GetObj("ISL_Cont").onmouseout=function(){AutoPlay();}AutoPlay();functionGetObj(objName){if(document.getElementById){returneval('document.getElementById("'+objName+'")')}else{returneval('document.all.'+objName)}}functionAutoPlay(){//自动滚动clearInterval(AutoPlayObj);AutoPlayObj=setInterval('ISL_GoDown();ISL_StopDown();',3000);//间隔时间}functionISL_GoUp(){//上翻开始if(MoveLock)return;clearInterval(AutoPlayObj);MoveLock=true;MoveTimeObj=setInterval('ISL_ScrUp();',Speed);}functionISL_StopUp(){//上翻停止clearInterval(MoveTimeObj);if(GetObj('ISL_Cont').scrollLeft%PageWidth-fill!=0){Comp=fill-(GetObj('ISL_Cont').scrollLeft%PageWidth);CompScr();}else{MoveLock=false;}AutoPlay();}functionISL_ScrUp(){//上翻动作if(GetObj('ISL_Cont').scrollLeft<=0){GetObj('ISL_Cont').scrollLeft=GetObj('ISL_Cont').scrollLeft+GetObj('List1').offsetWidth}GetObj('ISL_Cont').scrollLeft-=Space;}functionISL_GoDown(){//下翻clearInterval(MoveTimeObj);if(MoveLock)return;clearInterval(AutoPlayObj);MoveLock=true;ISL_ScrDown();MoveTimeObj=setInterval('ISL_ScrDown()',Speed);}functionISL_StopDown(){//下翻停止clearInterval(MoveTimeObj);if(GetObj('ISL_Cont').scrollLeft%PageWidth-fill!=0){Comp=PageWidth-GetObj('ISL_Cont').scrollLeft%PageWidth+fill;CompScr();}else{MoveLock=false;}AutoPlay();}functionISL_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;}functionCompScr(){varnum;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></form></body></html>

解决方案

解决方案二：
等待高手。
解决方案三：
最佳答案<%@LANGUAGE="VBSCRIPT"CODEPAGE="936"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>自动轮播代码</title><styletype="text/css"><!--.rollBox{width:704px;overflow:hidden;padding:12px05px6px;}.rollBox.LeftBotton{height:52px;width:19px;background:url(/images/btn_arrow_left.gif)no-repeat4px0;overflow:hidden;float:left;display:inline;margin:25px000;cursor:pointer;}.rollBox.RightBotton{height:52px;width:20px;background:url(/images/btn_arrow_right.gif)no-repeat4px0;overflow:hidden;float:left;display:inline;margin:25px000;cursor:pointer;}.rollBox.Cont{width:330px;overflow:hidden;float:left;}.rollBox.ScrCont{width:10000000px;}.rollBox.Cont.pic{width:80px;float:left;text-align:center;}.rollBox.Cont.picimg{padding:4px;background:#fff;border:1pxsolid#ccc;display:block;margin:0auto;}.rollBox.Cont.picp{line-height:26px;color:#505050;}.rollBox.Conta:link,.rollBox.Conta:visited{color:#626466;text-decoration:none;}.rollBox.Conta:hover{color:#f00;text-decoration:underline;}.rollBox#List1,.rollBox#List2{float:left;}.style2{font-size:10px;font-family:"新宋体";font-weight:bold;color:#0000FF;}--></style><!--rollBox.LeftBotton{height:52px;width:19px;background:url(/images/btn_arrow_left.gif)no-repeat4px0;overflow:hidden;float:left;这一段是显示左边按钮.rollBox.RightBotton{height:52px;width:20px;background:url(/images/btn_arrow_right.gif)no-repeat4px0;overflow:hidden;float:这一段是显示右边按钮--></head><body><divclass="rollBox"><divclass="LeftBotton"onMouseDown="ISL_GoUp()"onMouseUp="ISL_StopUp()"onMouseOut="ISL_StopUp()"></div><divclass="Cont"id="ISL_Cont"><divclass="ScrCont"><divid="List1"><!--图片列表begin--><%DimconnDB_ServerName="(local)SQLEXPRESS"'数据库名称(IP+实例名)DB_UserName="sa"'SQL用户名DB_PassWord="jacky.com"'SQL用户密码DB_DateBase="WEBSITE"'数据库名DB_Provider="SQLNCLI"'驱动程序sql="Provider="&DB_Provider&";UID="&DB_UserName&";Pwd="&DB_PassWord&";database="&DB_DateBase&";Server="&DB_ServerName&";"SetConn=Server.CreateObject("ADODB.Connection")Conn.Opensqlsql_luobo="select*from[website].[dbo].[pro]whereshowindex<>0orderbyberdesc"Setrs_luobo=conn.Execute(sql_luobo)whilenotrs_luobo.eof%><divclass="pic"><ahref="product/default.asp?prober=<%=rs_luobo("ber")%>"target="_blank"><imgsrc="<%=rs_luobo("photos22")%>"height="70"onloadstyle="cursor:pointer;"/></a><spanclass="style2"><%=rs_luobo("name")%></span></div><%rs_luobo.MoveNextwendrs_luobo.Closesetrs_luobo=nothing%></div><divid="List2"></div></div></div><divclass="RightBotton"onMouseDown="ISL_GoDown()"onMouseUp="ISL_StopDown()"onMouseOut="ISL_StopDown()"></div></div></div><scriptlanguage="javascript"type="text/javascript"><!--//--><![CDATA[//><!--//图片滚动列表varSpeed=1;//速度(毫秒)speed的值越大速度越慢varSpace=1;//每次移动(px)varPageWidth=132;//翻页宽度varfill=0;//整体移位varMoveLock=false;//moveLock是一个锁当它为false滚动继续，如果为true时则关闭图片滚动动作varMoveTimeObj;varComp=0;varAutoPlayObj=null;GetObj("List2").innerHTML=GetObj("List1").innerHTML;//克隆list2为list1GetObj('ISL_Cont').scrollLeft=fill;//滚动框里面的内容GetObj("ISL_Cont").onmouseover=function(){clearInterval(AutoPlayObj);}//当鼠标经过时，清除定时器达到图片停止滚动的功能GetObj("ISL_Cont").onmouseout=function(){AutoPlay();}//当鼠标离开时，图片继续滚动AutoPlay();functionGetObj(objName){if(document.getElementById){returneval('document.getElementById("'+objName+'")')}else{returneval('document.all.'+objName)}}functionAutoPlay(){//自动滚动clearInterval(AutoPlayObj);AutoPlayObj=setInterval('ISL_GoDown();ISL_StopDown();',30);//自动滚动间隔时间}functionISL_GoUp(){//上翻开始if(MoveLock)return;clearInterval(AutoPlayObj);MoveLock=true;MoveTimeObj=setInterval('ISL_ScrUp();',Speed);}functionISL_StopUp(){//上翻停止clearInterval(MoveTimeObj);if(GetObj('ISL_Cont').scrollLeft%PageWidth-fill!=0){Comp=fill-(GetObj('ISL_Cont').scrollLeft%PageWidth);CompScr();}else{MoveLock=false;}AutoPlay();}functionISL_ScrUp(){//上翻动作if(GetObj('ISL_Cont').scrollLeft<=0){GetObj('ISL_Cont').scrollLeft=GetObj('ISL_Cont').scrollLeft+GetObj('List1').offsetWidth}GetObj('ISL_Cont').scrollLeft-=Space;}functionISL_GoDown(){//下翻clearInterval(MoveTimeObj);if(MoveLock)return;clearInterval(AutoPlayObj);MoveLock=true;ISL_ScrDown();MoveTimeObj=setInterval('ISL_ScrDown()',Speed);}functionISL_StopDown(){//下翻停止clearInterval(MoveTimeObj);if(GetObj('ISL_Cont').scrollLeft%PageWidth-fill!=0){Comp=PageWidth-GetObj('ISL_Cont').scrollLeft%PageWidth+fill;CompScr();}else{MoveLock=false;}AutoPlay();}functionISL_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;}functionCompScr(){varnum;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>//欢迎各位同仁来转载交流

时间： 2024-10-27 22:48:26

求教如何将一款左右滚动的图片js特效修改成由左右按钮控制的滚动图片特js特效的相关文章

android drag-拖动图片到屏幕的底部，如何实现屏幕自动滚动？

问题描述 拖动图片到屏幕的底部,如何实现屏幕自动滚动? 布局是由ScrollView总领的,其中包含自定义的View, 自定义的View是一列竖排的图片,拖动一张图片到屏幕底部,如何实现动态显示scroll bar,并自动滚动? 急,多谢!

jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换,实例代码如下,感兴趣的朋友可以参考下哈   复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片

js实现带按钮的上下滚动效果

  本文实例讲述了js实现带按钮的上下滚动效果.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

“Win10 UAP 开发系列”之 在MVVM模式中控制ListView滚动位置

原文:"Win10 UAP 开发系列"之 在MVVM模式中控制ListView滚动位置 这个扩展属性从WP8.1就开始用了,主要是为了解决MVVM模式中无法直接控制ListView滚动位置的问题.比如在VM中刷新了数据,需要将View中的ListView滚动到顶部,ListView只有一个ScrollIntoView()方法可以控制滚动的位置,但最好在VM中不要出现直接控制View的代码,需要通过其他的方式. 使用一个扩展属性即可实现: /// <summary> ///

android properties-android机顶盒 使用遥控器控制listview时滚动速度太快，如何控制listview滚动速度

问题描述 android机顶盒 使用遥控器控制listview时滚动速度太快,如何控制listview滚动速度 android机顶盒项目的节目列表,如果一直按着遥控器下键,则listview一直快速滚动,速度太快了,怎么去控制listview的滚动速度? 解决方案 这个只能控制遥控器的按键逻辑,可以按住超过5秒的话,只响应一次.

JS实现部分HTML固定页面顶部随屏滚动效果_javascript技巧

本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果.分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 使用这个特效代码需要注意,如

JS与HTML结合使用marquee标签实现无缝滚动效果代码_javascript技巧

具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>一行多列文字循环滚

不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了_javascript技巧

/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\  制作时间:2006-08-29 (Ver 0.5)  发布时间:2006-08-31 (Ver 0.8)  更新时间:2007-01-31 (Ver 1.6)  更新说明: + 加入功能 * 修正.完善      1.6.070131          + 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)          + 判断是

基于jQuery的可以控制左右滚动及自动滚动效果的代码_jquery

分享一个控制左右滚动及自动滚动的样例, 昨晚花了两个多小时, 忍受着悍蚊的叮咬, 汗水的侵袭, 一行行的敲出来的血汗代码. 哈哈. 封装了两种模式: 点击滚动版本DEMO 自动滚动版本DEMO,源码中有详细注释. 思路: 点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展示区块left值实现切换. 1.向前(左):当在第一个版面时,滚动到最后一个页面,否则,累加left值,向前滚动; 2.向后(右):当在最后一个版面时,滚动到第一个页面,否则,累减left值,向后滚动;