图片无缝横向滚动代码，jQuery控制向左向右

发布时间：2018-08-16 07:10:56 所属栏目：Asp教程来源：站长网

导读：一款网页上无缝横向滚动的图片代码，利用 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>
提示：可修改后代码再运行!

（编辑：焦作站长网）

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