JavaScript滚动条控制图片横向滚动代码

发布时间：2018-08-18 05:17:20 所属栏目：编程来源：站长网

导读：一个 Java Script滚动条控制图片横向滚动的代码，与其它不同的区别是，它是可以被控制的，向左向右滚动都需要点击两端的小箭头，图片滚动时候带有缓冲效果，演示图片没有加链接，你决定用了就好好完善它，现在只是一个基础的框架，也没有怎么美化，请注意

　　一个JavaScript滚动条控制图片横向滚动的代码，与其它不同的区别是，它是可以被控制的，向左向右滚动都需要点击两端的小箭头，图片滚动时候带有缓冲效果，演示图片没有加链接，你决定用了就好好完善它，现在只是一个基础的框架，也没有怎么美化，请注意，JavaScript代码一定要放在调用图片的代码之后，否则会失效。

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript控制图片横向滚动代码 - Veryhuo.COM</title> <style> ul{margin:0;padding:0;list-style:none;width:100000px} li{margin:0;padding:0;width:100px;height:90px;display:block;float:left;margin-right:5px;background:#009900} #img_bag{width:640px;height:90px;background:#FF9900;margin:0 auto;font-size:9pt;} #img_bag a{float:left;width:20px;display:block;height:20px;font-weight:bold;} #img_bag #img{width:600px;height:90px;background:#ccc;overflow:hidden;float:left;border:0px;} #scrollBar{width:600px;height:20px;background:#FF0000;margin:0 auto;position:relative} #scroll{width:30px;height:20px;background:#000000;cursor:pointer;position:absolute;} </style> </head> <body> <div id="img_bag"> <a href="javascript:void(0)" onmousedown="moveLeft()"><<</a> <div id="img"> <ul> <li><img src="/uploads/common/images/s_p1.jpg"></li> <li><img src="/uploads/common/images/s_p2.jpg"></li> <li><img src="/uploads/common/images/s_p7.jpg"></li> <li><img src="/uploads/common/images/s_p6.jpg"></li> <li><img src="/uploads/common/images/s_p8.jpg"></li> <li><img src="/uploads/common/images/s_p2.jpg"></li> <li><img src="/uploads/common/images/s_p9.jpg"></li> <li><img src="/uploads/common/images/s_p1.jpg"></li> <li><img src="/uploads/common/images/s_p3.jpg"></li> <li><img src="/uploads/common/images/s_p1.jpg"></li> <li><img src="/uploads/common/images/s_p4.jpg"></li> <li><img src="/uploads/common/images/s_p5.jpg"></li> </ul> </div> <a href="javascript:void(0)" onmousedown="moveRight()">>></a> </div> <div style="clear:both;"></div> <div id="scrollBar"><div id="scroll" style="left:0"></div></div> <script> function $(obj){return document.getElementById(obj)} var maxWidth=$("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length*105; var isScroll=false; var modiLeft; $("scroll").onmousedown=function(evt){ isScroll=true; evt=(evt)?evt:((window.event)?window.event:null); if(evt.offsetX){ modiLeft=parseInt(evt.offsetX) } else{modiLeft=parseInt(evt.layerX)} } document.onmouseup=function(){ isScroll=false; } document.onmousemove=function(evt){ evt=(evt)?evt:((window.event)?window.event:null); if(evt&&isScroll){ $("scroll").style.left=parseInt(evt.clientX)-parseInt($("scrollBar").offsetLeft)-modiLeft+"px"; if(parseInt($("scroll").style.left)<0){$("scroll").style.left=0+"px"} if(parseInt($("scroll").style.left)>570){$("scroll").style.left=570+"px"} $("img").scrollLeft=parseInt($("scroll").style.left)*((maxWidth-600)/570); } } // 烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ var targetx = 200;//一次滚动距离 var dx; var a=null; function moveLeft(){ var le=parseInt($("img").scrollLeft); if(le>200){ targetx=parseInt($("img").scrollLeft)-200; } else{targetx=parseInt($("img").scrollLeft)-le-1} scLeft(); } function scLeft(){ dx=parseInt($("img").scrollLeft)-targetx; $("img").scrollLeft-=dx*.3; $("scroll").style.left=parseInt($("img").scrollLeft)*(570/(maxWidth-600))+"px"; if(parseInt($("scroll").style.left)<0){$("scroll").style.left=0+"px"} if(parseInt($("scroll").style.left)>570){$("scroll").style.left=570+"px"} clearScroll=setTimeout(scLeft,50); if(dx*.3<1){clearTimeout(clearScroll)} } function moveRight(){ var le=parseInt($("img").scrollLeft)+200; var maxL=maxWidth-600; if(le<maxL){ targetx=parseInt($("img").scrollLeft)+200; } else{targetx=maxL} scRight(); } function scRight(){ dx=targetx-parseInt($("img").scrollLeft); $("img").scrollLeft+=dx*.3; $("scroll").style.left=parseInt($("img").scrollLeft)*(573/(maxWidth-600))+"px"; if(parseInt($("scroll").style.left)<0){$("scroll").style.left=0+"px"} if(parseInt($("scroll").style.left)>=570){$("scroll").style.left=570+"px"} a=setTimeout(scRight,50); if(dx*.3<1){clearTimeout(a)} } </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

把not in 更换成not e	mydumper工具运用介绍
别花冤枉钱买专栏了！	Mysql索引类型创建错误