动易图片滚动代码

图片滚动特效代码图片滚动特效代码注意: 各参数详解：（1）scrollAmount。

它表示速度，值越大速度越快。

如果没有它，默认为6，建议设为1～3比较好。

（2）width和height，表示滚动区域的大小，width是宽度，height是高度。

特别是在做垂直滚动的时候，一定要设height 的值。

（3）direction。

表示滚动的方向，默认为从右向左：←←←。

可选的值有right、down、up。

滚动方向分别为：right表示→→→，up表示↑，down表示↓。

（4）scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。

通常scrollDelay是不需要设置的。

（5）behavior。

用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动)（6）蓝色地方是图片地址，可以换上自己喜欢的图片。

1.图片向上循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275 direction=up><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：2.图片向下循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275 direction=down><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：3.图片向左循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275> <A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：4.图片向右循环滚动代码：<CENTER><MARQUEE width=220 scrollAmount=3 height=275 direction=right><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：5.图片来回滚动代码：<CENTER><MARQUEE width=380 scrollAmount=3 height=275 behavior="alternate"><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A><A><IMG height=275 src="图片地址"width=220></A></MARQUEE></CENTER>效果：以上五种图片滚动效果代码说明：1.“width=380”表示滚动的宽度范围，数值可以按自己喜欢的调整2.“height=275”表示滚动的高度范围，数值可以随意调整3.“scrollAmount=3”表示滚度速度为3，1到3为最佳数值，默认为64.“height=275”表示图片的高度为275（建议按自己喜欢的图片高度调整）5.“width=220”表示图片的宽度为220（建议按自己喜欢的图片宽度调整）6.“图片地址”表示图片的属性地址粘贴处（因本人太懒，所以所有的滚动图片都只用一张代替；(*^__^*)，当然，每个“图片地址”都可以换上不同的图片地址，效果会更好。

<!-- 指向链接图片的URL --><base href=""><div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"><div id="demo1"><!-- 定义内容--><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.gif"></div><div id="demo2"></div></div><script language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=10; //滚动速度值，值越大速度越慢demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1function Marquee(){if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端else{demo.scrollTop++}}var MyMar = setInterval(Marquee,speed); //设置定时器demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器--></script>二、向下的无缝循环滚动程序代码： [ 复制代码到剪贴板 ]<!-- 指向链接图片的URL --><base href=""><div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"><div id="demo1"><!-- 定义内容--><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.gif"></div><div id="demo2"></div></div><script language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=10; //数值越大滚动速度越慢demo2.innerHTML = demo1.innerHTML;demo.scrollTop = demo.scrollHeight;function Marquee(){if(demo1.offsetTop-demo.scrollTop>=0)demo.scrollTop+=demo2.offsetHeightelse{demo.scrollTop--}}var MyMar = setInterval(Marquee,speed);demo.onmouseover = function(){clearInterval(MyMar)}demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}--></script>三、向左的无缝循环滚动程序代码： [ 复制代码到剪贴板 ]<!-- 指向链接图片的URL --><base href=""><div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"><table border="0" cellspacing="0" cellpadding="0"><tr><td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><imgsrc="images/logo/macromedia.gif"><imgsrc="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td><td id="demo2">&nbsp;</td></tr></table></div><script language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=10; //数值越大滚动速度越慢demo2.innerHTML = demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar = setInterval(Marquee,speed);demo.onmouseover = function(){clearInterval(MyMar)}demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}--></script>四、向右的无缝循环滚动程序代码： [ 复制代码到剪贴板 ]<!-- 指向链接图片的URL --><base href=""><div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"><table border="0" cellspacing="0" cellpadding="0"><tr><td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><imgsrc="images/logo/macromedia.gif"><imgsrc="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td><td id="demo2">&nbsp;</td></tr></table></div><script language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=10; //数值越大滚动速度越慢demo2.innerHTML = demo1.innerHTML;demo.scrollLeft = demo.scrollWidth;function Marquee(){if(demo.scrollLeft<=0)demo.scrollLeft+=demo2.offsetWidthelse{demo.scrollLeft--}}var MyMar = setInterval(Marquee,speed)demo.onmouseover = function(){clearInterval(MyMar)}demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}--></script>来源：/204708++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++上下綜合實例<a href="#" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed" >^^^^^^^^^^^^^^^^^^^^^^^^</a> <div id=demo style="overflow:hidden;height:421px;width:190px;"><div id="demo1"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td height="421" align="center"><table width="95%" border="0" cellspacing="7" cellpadding="0"> <tr><td align="center"><a href="main.php?action=introduce_view&id=1"><imgsrc="http://qz/upload/2008/12/101239_small.jpg" width="180" height="73" border="0" /></a></td></tr><tr><td align="center"><a href="main.php?action=introduce_view&id=2"><imgsrc="http://qz/upload/2008/12/101251_small.jpg" width="180" height="73" border="0" /></a></td></tr><tr><td align="center"><a href="main.php?action=introduce_view&id=1"><imgsrc="http://qz/upload/2008/12/101239_small.jpg" width="180" height="73" border="0" /></a></td></tr><tr><td align="center"><a href="main.php?action=introduce_view&id=2"><imgsrc="http://qz/upload/2008/12/101251_small.jpg" width="180" height="73" border="0" /></a></td></tr></table></td></tr></table></div><div id="demo2"></div></div><a href="#" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,spe ed)"onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)" >ⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤⅤ</a><script>var speed=1 ;var addspeed=1;var dafault_addspeed=1;var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");demo2.innerHTML=demo1.innerHTML ;function Marquee(){if(demo2.offsetHeight-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeight;else{demo.scrollTop=demo.scrollTop+addspeed;}}function rightAddSpeed(){if(demo1.offsetTop-demo.scrollTop>=0)demo.scrollTop+=demo2.offsetHeightelse{demo.scrollTop-=10;}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>=================================================+++++++++++++++左右綜合实例++++++++++++++<table width="1002" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td height="153" valign="top" background="images/pro_centerbg2.jpg"><table width="1002" height="140" border="0" cellpadding="0" cellspacing="0"><tr><td width="106" align="center" valign="top"><img src="images/jiantou_left.jpg" width="60" height="88" onmouseover="addspeed=10" onmouseout="addspeed=dafault_addspeed"/></td><td width="790" valign="top"><!----------------------------小圖展示區------------------------------------><div id=demo style="overflow:hidden;height:100px;width:790px;"><table><tr><td id="demo1" valign="top"><table width="790" height="140" border="0" cellpadding="0" cellspacing="0"> <tr><td width="131" align="center" valign="top" ><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest1.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="131" align="center" valign="top" ><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest2.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="131" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest3.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="131" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest4.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="131" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--> <DIV class="bd" style="width:110px; height:74px;"><img src="images/protest5.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="135" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--><DIV class="bd" style="width:110px; height:74px;"><img src="images/protest6.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td><td width="135" align="center" valign="top"><DIV class="example" style="width:130px; "><!--[if lte IE 6.5]><v:rect filled="f"><v:fill size="0pt,0pt"></v:fill><![endif]--><DIV class="bd" style="width:110px; height:74px;"><img src="images/protest6.jpg" width="110" height="74" /></DIV><!--[if lte IE 6.5]></v:rect><![endif]--></DIV></td></tr></table></td><td valign="top" id="demo2"></td></tr></table></div><!----------------------------小圖展示區end------------------------------------></td><td width="106" align="center" valign="top"><img src="images/jiantou_right.jpg" width="60" height="88" onmouseover="clearInterval(MyMar);MyMar=setInterval(rightAddSpeed,speed)" onmouseout="clearInterval(MyMar);MyMar=setInterval(Marquee,speed)"/></td> </tr></table></td></tr></table><script>var speed=1var addspeed=1;var dafault_addspeed=1;var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft=demo.scrollLeft+addspeed}}function rightAddSpeed(){if(demo2.offsetWidth-demo.scrollLeft>0)demo.scrollLeft+=demo1.offsetWidthelse{demo.scrollLeft=demo.scrollLeft-10}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- </title></head><body><div id="colee" style="overflow:hidden;height:253px;width:410px;"><div id="colee1"><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></div><div id="colee2"></div></div><script>var speed=30;var colee2=document.getElementById("colee2");var colee1=document.getElementById("colee1");var colee=document.getElementById("colee");colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2function Marquee1(){//当滚动至colee1与colee2交界时if(colee2.offsetTop-colee.scrollTop<=0){colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端}else{colee.scrollTop++}}var MyMar1=setInterval(Marquee1,speed)//设置定时器//鼠标移上时清除定时器达到滚动停止的目的colee.onmouseover=function() {clearInterval(MyMar1)}//鼠标移开时重设定时器colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}</script><!--向上滚动代码结束--><br><!--下面是向下滚动代码--><div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"> <div id="colee_bottom1"><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></div><div id="colee_bottom2"></div></div><script>var speed=30var colee_bottom2=document.getElementById("colee_bottom2");var colee_bottom1=document.getElementById("colee_bottom1");var colee_bottom=document.getElementById("colee_bottom");colee_bottom2.innerHTML=colee_bottom1.innerHTMLcolee_bottom.scrollTop=colee_bottom.scrollHeightfunction Marquee2(){if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)colee_bottom.scrollTop+=colee_bottom2.offsetHeightelse{colee_bottom.scrollTop--}}var MyMar2=setInterval(Marquee2,speed)colee_bottom.onmouseover=function() {clearInterval(MyMar2)}colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)} </script><!--向下滚动代码结束--><br><!--下面是向左滚动代码--><div id="colee_left" style="overflow:hidden;width:500px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="colee_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td></tr></table></td><td id="colee_left2" valign="top"></td></tr></table></div><script>//使用div时，请保证colee_left2与colee_left1是在同一行上.var speed=30//速度数值越大速度越慢var colee_left2=document.getElementById("colee_left2");var colee_left1=document.getElementById("colee_left1");var colee_left=document.getElementById("colee_left");colee_left2.innerHTML=colee_left1.innerHTMLfunction Marquee3(){if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度else{colee_left.scrollLeft++}}var MyMar3=setInterval(Marquee3,speed)colee_left.onmouseover=function() {clearInterval(MyMar3)}colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}</script><!--向左滚动代码结束--><br><!--下面是向右滚动代码--><div id="colee_right" style="overflow:hidden;width:500px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="colee_right1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td><td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td></tr></table></td><td id="colee_right2" valign="top"></td></tr></table></div><script>var speed=30//速度数值越大速度越慢var colee_right2=document.getElementById("colee_right2");var colee_right1=document.getElementById("colee_right1");var colee_right=document.getElementById("colee_right");colee_right2.innerHTML=colee_right1.innerHTMLfunction Marquee4(){if(colee_right.scrollLeft<=0)colee_right.scrollLeft+=colee_right2.offsetWidthelse{colee_right.scrollLeft--}}var MyMar4=setInterval(Marquee4,speed)colee_right.onmouseover=function() {clearInterval(MyMar4)}colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)} </script><!--向右滚动代码结束--></body></html>。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>响应式图片切换jQuery选项卡</title><style>html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;padding:0;}img,a img{border-style:none;border-width:0;}a,a:hover{ text-decoration:none}html {margin:0 auto;}ol,ul,li{list-style: none;}:focus{outline: 0;}body{background-color:#eef9f8; color:#666}a,a:visited{ color:#666}a:hover {color:#009966;}.main{ font-family:宋体; color:#666; width:912px; margin:0 auto}.slider-scroll{margin-top:12px; overflow:hidden;height:421px;}#showArea{ width:664px; float:left;height:419px;border:1px solid #bebebe; border-right:none}#showArea img{ opacity:0; display:none;}#scrollDiv{float:left; width:246px; height:421px; background:url(/jscss/demoimg/201402/slider_side.jpg) 0 0 no-repeat}#scrollDiv ul{ padding:19px 0 0 0}#scrollDiv li{width:220px;height:57px;padding:10px 0 10px 26px; cursor:pointer; font-family:微软雅黑;}#scrollDiv li.on{ background:#003030; position:relative;}#scrollDiv li a{display:block; font-size:16px; height:35px; line-height:35px; color:#fff;}#scrollDiv li span{display:block; color:#66ffff; font-size:14px; height:15px; line-height:15px; }#scrollDiv li span.entity-triangle{ display:none; }#scrollDiv li.on span.entity-triangle{position:absolute; top:31px; left:-6px; display:block; width:6px; height:22px;z-index:99;}</style><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"> </script><script type="text/javascript">$.extend({manualScroll:function(opt,callback){//alert("suc");this.defaults = {objId:"", // 滚动区域idshowArea:"", // 大图显示区域id，如果没有就不显示showWidth:419, // 大图宽度showHeight:664, // 大图高度showTitle: false, // 是否在大图下方显示标题width:300, // 每行的宽度height:100, // div的高度picTimer:0, // 间隔句柄，不需要设置，只是作为标识使用interval:5500};//参数初始化var opts = $.extend(this.defaults,opt);var $objId = opts.objId;var $showArea = opts.showArea;var $showWidth = opts.showWidth;var $showHeight = opts.showHeight;var $showTitle = opts.showTitle;var $width = opts.width;var $height = opts.height;var $titleopacity = opts.titleopacity;var $picTimer = opts.picTimer;var index=0;var $len = $("#"+$objId).find("ul li").length;/*设置显示图片大小*/$("#"+$showArea).find("img").css({"height":$showHeight,"width":$showWidth});/*鼠标移动事件*/$("#"+$objId).find("ul li").hover(function(){index = $(this).index();showimg(index);});/*自动切换*/$(".slider-scroll").hover(function(){clearInterval($picTimer);},function(){$picTimer = setInterval(function() {if(index==$len-1){index=0;}else{index+=1;}$("#"+$objId).find("ul li").removeClass("on");$("#"+$objId).find("ul li").eq(index).addClass("on");$("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});$("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);},opts.interval); // 自动播放的间隔，单位：毫秒}).trigger("mouseleave");function showimg(index){if(index==$len){index=0;}$("#"+$objId).find("ul li").removeClass("on");$("#"+$objId).find("ul li").eq(index).addClass("on");$("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});$("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);index+=1;}}});</script></head><body><script type="text/javascript">//home 顶部大图切换$(document).ready(function(){$.manualScroll({ objId:"scrollDiv", showArea:"showArea", showWidth:664, // 大图宽度showHeight:419, // 大图高度showTitle: true,picTimer:0,interval:3000});});</script><div class="main"><div class="slider-scroll f-c"><div id="showArea"><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall1.jpg" width="664px" height="419px"></a><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall4.jpg" width="664px" height="419px"></a><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall6.jpg" width="664px" height="419px"></a><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall7.jpg" width="664px" height="419px"></a><a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall9.jpg" width="664px" height="419px"></a></div><div id="scrollDiv"><ul><li class="on"><a href="/" target="_blank">斜弱视专家援疆<!--12个字以内--><span>权威治疗疑难斜弱视<!--14个字以内--></span></a><span class="entity-triangle"></span></li><li ><a href="/" target="_blank">IntraLase飞秒激光治近视<!--12个字以内--><span>全程无刀安全治近视首选<!--14个字以内--></span></a><span class="entity-triangle"></span></li><li ><a href="/" target="_blank">青少年近视防控<!--12个字以内--><span>非手术治近视<!--14个字以内--></span></a><span class="entity-triangle"></span></li><li ><a href="/" target="_blank">白内障防治<!--12个字以内--><span>爱让父母看得见<!--14个字以内--></span></a><span class="entity-triangle"></span></li><li ><a href="/" target="_blank">ICL人工晶体植入术<!--12个字以内--><span>无损角膜之高端近视治疗<!--14个字以内--></span></a><span class="entity-triangle"></span></li></ul></div></div></div><div style="text-align:center;clear:both"> </div></body></html>。

<nobr><div id="marqueediv8" style="width:831px;height:120px;overflow:hidden; "> <img src="images/1.jpg" width="150" height="120" border="0"/> <img src="images/2.jpg" width="150" height="120" border="0" /> <img src="images/3.jpg" width="150" height="120" border="0"/> <img src="images/4.jpg" width="150" height="120"border="0" /> <img src="images/5.jpg" width="150" height="120" border="0"/> <img src="images/6.jpg" width="150" height="120"border="0" /> <img src="images/7.jpg" width="150" height="120" border="0"/> <img src="images/8.jpg" width="150" height="120"border="0" /> <img src="images/9.jpg" width="150" height="120" border="0"/> <img src="images/10.jpg" width="150" height="120"border="0" /> <img src="images/11.jpg" width="150" height="120" border="0"/> <img src="images/12.jpg" width="150" height="120"border="0" /> <img src="images/13.jpg" width="150" height="120" border="0"/> <img src="images/14.jpg" width="150" height="120" border="0"/> </div></nobr><script>window.onload=function(){new Marquee("marqueediv8", //容器ID<br />2, //向上滚动(0向上1向下2向左3向右)<br />1, //滚动的步长<br />831, //容器可视宽度<br />120, //容器可视高度<br />30, //定时器数值越小，滚动的速度越快(1000=1秒,建议不小于20)<br />0, //间歇停顿时间(0为不停顿,1000=1秒)<br />0, //开始时的等待时间(0为不等待,1000=1秒)<br />0//间歇滚动间距(可选)<br />);};</script><script>function Marquee(){this.ID=document.getElementById(arguments[0]);this.Direction=arguments[1];this.Step=arguments[2];this.Width=arguments[3];this.Height=arguments[4];this.Timer=arguments[5];this.WaitTime=arguments[6];this.StopTime=arguments[7];if(arguments[8]){this.ScrollStep=arguments[8];}else{this.ScrollStep=this.Direction>1?this.Width: this.Height;}this.CTL=this.StartID=this.Stop=this.MouseOver=0;this.ID.style.overflowX=this.ID.style.overflowY="hidden";this.ID.noWrap=true;this.ID.style.width=this.Width;this.ID.style.height=this.Height;this.ClientScroll=this.Direction>1?this.ID.scrollWidth:this.ID.scrollHeight;this.ID.innerHTML+=this.ID.innerHTML;this.Start(this,this.Timer,this.WaitTime,this.StopTime);}Marquee.prototype.Start=function(msobj,timer,waittime,stoptime){msobj.StartID=function(){msobj.Scroll();}msobj.Continue=function(){if(msobj.MouseOver==1){setTimeout(msobj.Continue,waittime);}else{clearInterval(msobj.TimerID); msobj.CTL=msobj.Stop=0; msobj.TimerID=setInterval(msobj.StartID,timer);}}msobj.Pause=function(){msobj.Stop=1; clearInterval(msobj.TimerID); setTimeout(msobj.Continue,waittime);}msobj.Begin=function(){msobj.TimerID=setInterval(msobj.StartID,timer);msobj.ID.onmouseover=function(){msobj.MouseOver=1; clearInterval(msobj.TimerID);} msobj.ID.onmouseout=function(){msobj.MouseOver=0;if(msobj.Stop==0){clearInterval(msobj.TimerID);msobj.TimerID=setInterval(msobj.StartID,timer);}}}setTimeout(msobj.Begin,stoptime);}Marquee.prototype.Scroll=function(){switch(this.Direction){case 0:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollTop+=this.ScrollStep+this.Step-th is.CTL; this.Pause(); return;}else{if(this.ID.scrollTop>=this.ClientScroll) this.ID.scrollTop-=this.ClientScroll; this.ID.scrollTop+=this.Step;}break;case 1:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollTop-=this.ScrollStep+this.Step-thi s.CTL; this.Pause(); return;}else{if(this.ID.scrollTop<=0) this.ID.scrollTop+=this.ClientScroll; this.ID.scrollTop-=this.Step;}break;case 2:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollLeft+=this.ScrollStep+this.Step-th is.CTL; this.Pause(); return;}else{if(this.ID.scrollLeft>=this.ClientScroll) this.ID.scrollLeft-=this.ClientScroll; this.ID.scrollLeft+=this.Step;}break;case 3:this.CTL+=this.Step;if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollLeft-=this.ScrollStep+this.Step-th is.CTL; this.Pause(); return;}else{if(this.ID.scrollLeft<=0) this.ID.scrollLeft+=this.ClientScroll; this.ID.scrollLeft-=this.Step;}break;}}</script>。

图片移动制作代码大全1/图片来回移动代码：&lt;marquee width=100% behavior=alternate scrollamount=10&gt;&lt;img src=图片地址width=112 height=112&gt;&lt;img src=图片地址width=112 height=112&gt;&lt;img src=图片地址width=112 height=112&gt;&lt;img src=图片地址width=112 height=112&gt;&lt;br&gt;&lt;/marquee&gt;方法：将代码代入，将图片地址换上自己要传的图片地址即可，要传的图片数量多的话，将代码继续复制。

width=112 、height=112（宽、高）的数字可根据需要改变。

2/图片上下起伏代码：&lt;marquee direction=left&gt;&lt;marqueebehavior=alternate direction=up height=300&gt;&lt;img src=图片地址&gt;&lt;img src=图片地址&gt;&lt;/marquee&gt;&lt;/marquee&gt;方法：将代码代入，将图片地址换上自己要传的图片地址即可3/图片从左向右移动：&lt;marquee direction=right&gt;&lt;img height=300 src=图片地址width=400&gt;&lt;img height=300 src=图片地址width=400&gt;&lt;img height=300 src=图片地址width=400&gt;&lt;img height=300 src=图片地址width=400&gt;&lt;img height=300 src=图片地址width=400&gt;&lt;img height=300 src=图片地址width=400&gt;&lt;/marquee&gt;4/图片从右向左移动代码：&lt;MARQUEE&gt;&lt;IMG height=150 src="图片地址"width=200&gt;&lt;IMG height=150 src="图片地址"width=200&gt;&lt;IMG height=150 src="图片地址"width=200&gt;&lt;IMG height=150 src="图片地址"width=200&gt;&lt;/MARQUEE&gt; 将代码代入，将图片地址换上自己要传的图片地址即可，要传的图片数量多的话，将代码继续复制。

Jquery图⽚滚动与幻灯⽚的实例代码1、复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title></title><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function () {Xhun(".a"); //----------------------只需要修改 ”.a" (就是最⼤的div的class值这⾥就⾏---------------------});function Xhun(_box) {var box_frame = _box + " div ul";var box_div = _box + " div";$(_box).find("ul").wrap("<div></div>"); //添加⼀个div，来控制偏移量$(box_div).append($(box_frame).clone()); //克隆⼀个ul并添加到div中，为了实现⽆缝循环$(box_div).append($(box_frame).clone()); //克隆⼀个ul并添加到div中，为了实现⽆缝循环var li_size = $(_box).find("li").size(); //获取li的个数var li_width = $(box_frame).children("li").width(); //获取li的宽度var box_div_width = $(box_div).width(li_size * li_width * 5); //设置div的宽度$(box_frame).css("float", "left");var dd = setInterval(gd, 30);function gd() {var position = $(_box).scrollLeft(); //scrollLeft()是获取对象的⽔平偏移量$(_box).scrollLeft(position + 1);if (position >= $(box_frame).width()) { $(_box).scrollLeft(0); } //判断位移是否⼤于ul的总长度}$(_box).mouseleave(function () {dd = setInterval(gd, 30);}).mouseenter(function () {clearInterval(dd);});}</script><style type="text/css">* { margin: 0; padding: 0; }ul { list-style: none; }li { float: left; margin-left: 10px; width: 100px; }img { width: 100px; height: 100px; }.a { width: 400px; margin: 0 auto; overflow: hidden; height: 100px; }</style></head><body><div class="a"><ul><li><a href="#"><img src="Wife1.jpg" alt="img" title="img" /></a></li><li><a href="#"><img src="Wife2.jpg" alt="img" title="img" /></a></li></ul></div></body></html>2、复制代码代码如下:<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>幻灯⽚切换</title><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function () {slide(".frame"); //----------------------只需要修改 ”.frame" (就是最⼤的div的class值这⾥就⾏---------------------});function slide(cls) {$(cls).find("ul").wrap("<div></div>");$(cls+" div").attr("class","iframe");var li = $(cls).find("li").size();//统计多少张图⽚var li_width = $(cls).find("li").width(); //获取li的宽度$(cls + " div").children("ul").width(li_width * li);//设置宽度，使图⽚排成⼀排var s = "<ul class='button'>";//⽣成li的按钮for (var i = 0; i < li; i++) {s += "<li>" + (i + 1) + "</li>";}s += "</ul>";$(s).appendTo($(cls));//⽣成按钮结束,并添加到最⼤div⾥⾯var _i = 0;//当前的编号$(cls).find(".button li").each(function (i) {//⽣成按钮点击事件$(this).click(function () {_i = i;$(this).attr("class", "on").siblings().removeAttr("class");//设置class，没必要再多加⼀个off$(cls + " div").animate({ scrollLeft: i * li_width }, "slow");//图⽚移动});}).eq(0).click();function tt() {//定时器函数_i++;_i = _i % li;$(cls).find(".button li").eq(_i).click();//⾃动点击切换图⽚}var t = setInterval(tt, 3000);//定时器$(cls).hover(function () {clearInterval(t);//⿏标经过清除定时器，离开时⼜触发}, function () {t = setInterval(tt, 3000);})}</script><style type="text/css">* { margin: 0; padding: 0; }li, ul { list-style: none; margin: 0; padding: 0; }.frame { width: 280px; height: 280px; position: relative; margin: 0 auto; } /*这⾥需要修改最⼤div的宽度和⾼度*/.iframe { overflow: hidden; width: 280px; height: 280px; } /*这⾥需要修改该div的宽度和⾼度*/.iframe ul li { float: left; width: 280px; } /*这⾥需要修改li的宽度*/.button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }.button li { float: left; cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px;border-radius: 7px; color: #fff; background: #000; }.button .on { color: #000; background: #fff; }</style></head><body><!-- 这⾥要按照这样的格式来写 --><div class="frame"><ul><li><a href="#"><img src="Wife1.jpg" width="280" height="280" alt="img" /></a></li> <li><a href="#"><img src="Wife2.jpg" width="280" height="280" alt="img" /></a></li> <li><a href="#"><img src="Wife3.jpg" width="280" height="280" alt="img" /></a></li> <li><a href="#"><img src="Wife4.jpg" width="280" height="280" alt="img" /></a></li> <li><a href="#"><img src="Wife5.jpg" width="280" height="280" alt="img" /></a></li> </ul></div></body></html>。