图片无缝横向转动代码，jQuery节制向左向右

发布时间：2018-08-17 09:22:55 所属栏目：编程来源：站长网

导读：一款网页上无缝横向转动的图片代码，操作 jQuery 技能节制图片向左、向右往返切换，一样平常用在网站文章页的尾部，猛火小编提议各人挪用一些美男图片，这样可以增进网站的PV赏识量哦。哈哈，你是不是也这样想的？代码特点： 1、兼容IE6、7、8，FF，opera，ch

　　一款网页上无缝横向转动的图片代码，操作jQuery技能节制图片向左、向右往返切换，一样平常用在网站文章页的尾部，猛火小编提议各人挪用一些美男图片，这样可以增进网站的PV赏识量哦。哈哈，你是不是也这样想的？

　　代码特点：

　　1、兼容IE6、7、8，FF，opera，chrome，safari。
　　2、无操纵时，图片自动轮回转动，鼠标移到图片上时，遏制转动，移出图片，开始转动。
　　3、鼠标移到左侧按钮时，图片遏制自动转动，单击按钮，图片向左转动，鼠标移出，自动转动开始。

　　为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增网页版演示。

　　点击查察：网页殊效

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>图片无缝转动代码，向左向右可以节制_猛火网_LIehuo.Net</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <style type="text/css"> *{ margin:0; padding:0;} #box{ border:1px #ccc solid; width:600px; height:200px; overflow:hidden;margin:100px auto 0; position:relative;} #div{ width:2400px; position:relative;} #img,#img1{ list-style:none; width:1200px; float:left;} #img img,#img1 img{width:200px; float:left;} ul li{ float:left;} #but{ width:600px; height:30px; margin:0 auto;} #a{ float:left;} #b{ float:right;} #but input{ width:80px; height:30px; font-size:22px; font-weight:bold;} </style> </head> <body> <div id="box"> <div id="div"> <ul id="img"> <li><img src="/uploads/common/images/liehuonet_400x345_1.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_2.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_3.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_4.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_5.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_6.jpg" /></li> </ul> <ul id="img1"> <li><img src="/uploads/common/images/liehuonet_400x345_1.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_2.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_3.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_4.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_5.jpg" /></li> <li><img src="/uploads/common/images/liehuonet_400x345_6.jpg" /></li> </ul> </div> </div> <div id="but"> <div id="a"><input type="button" id="but1" value="左移" /></div> <div id="b"><input type="button" id="but2" value="右移" /></div> </div> <script type="text/javascript"> /*获取id节点的函数*/ $(function(){ function getId(id){ return $('#'+id); } /*建设图片转动工具(前四个参数是标签的id)*/ function marquee(divElem,imgElem,lBut,rBut,imgWidth,speed,autoSpeed){//参数寄义(包括两组图片的div，包括一组图片的ul，左侧按钮，右侧按钮,图片宽度，单张图片转动时刻，图片转动隔断时刻) this.box=getId(divElem); this.img=getId(imgElem); this.lBut=getId(lBut); this.rBut=getId(rBut);//获取各个节点 this.imgWidth=imgWidth; this.speed=speed; this.autoSpeed=autoSpeed; this.num=0;//全局变量,用来举办前提节制 var that=this; /*图片自动转动函数*/ this.autoGo=function(){ that.num+=that.imgWidth; that.box.animate({right:"+="+that.imgWidth+"px"},that.speed); if(that.num>=that.img.width()){ that.num=0; that.box.animate({right:"0px"},0); } } } /*工具要领*/ marquee.prototype={ /*图片的自动转动*/ autoScroll:function(){ var that=this; auto=setInterval(this.autoGo,this.autoSpeed); this.box.mouseover(function(){ clearInterval(auto); }); this.box.mouseout(function(){ auto=setInterval(that.autoGo,that.autoSpeed); }) this.lBut.mouseover(function(){ clearInterval(auto); if(that.num==that.img.width()){ that.num=0; that.box.animate({right:"0px"},0); } }); this.lBut.mouseout(function(){ auto=setInterval(that.autoGo,that.autoSpeed); }); this.rBut.mouseover(function(){ clearInterval(auto); if(that.num==0){ that.num=that.img.width(); that.box.animate({right:that.img.width()+"px"},0); } }); this.rBut.mouseout(function(){ auto=setInterval(that.autoGo,that.autoSpeed); if(that.num==that.img.width()){ that.num=0; that.box.animate({right:"0px"},0); } }); }, /*单击左侧按钮,图片向左转动*/ leftScroll:function(){ var that=this; this.lBut.click(function(){ that.num+=that.imgWidth; that.box.animate({right:"+="+that.imgWidth+"px"},that.speed); if(that.num>=that.img.width()){ that.num=0; that.box.animate({right:"0px"},0); } }); }, /*单击右侧按钮,图片向右转动*/ rightScroll:function(){ var that=this; this.rBut.click(function(){ that.num-=that.imgWidth; that.box.animate({right:"-="+that.imgWidth+"px"},that.speed); if(that.num<=0){ that.num=that.img.width(); that.box.animate({right:that.img.width()+"px"},0); } }); } } var a=new marquee("div","img","but1","but2",200,300,2000);//初始化工具 a.autoScroll(); a.leftScroll(); a.rightScroll(); }); </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE