JavaScript转动条节制图片横向转动代码

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

导读：一个 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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys