常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全

JS轮播图（⽆缝连接的轮播图实现，含代码供参考）需求：实现轮播图，图⽚⽆缝切换，⾃动播放。

实现效果：思考⼀下：在图⽚列表后⾯多加⼀张图⽚，这张图⽚是第⼀张图⽚（为了确保⽆缝衔接）。

图⽚就是平铺放在⼀个pic⾥⾯的，每次移动就是改变的pic的left值。

来撸代码~~。

所有的代码放在最后⾯，这⾥只讲⼀些重要的⽅法：为防⽌懵逼：先贴出封装函数move()的代码供参考function move(ele, attr, speed, target, callback){//获取当前的位置//从左往右进⾏移动 --- current<target speed//从右往左进⾏移动 --- current>target -speedvar current = parseInt(getStyle(ele, attr));// 810 > 800if(current>target){speed = -speed;}//定时器累加问题 --- 先清除再开启clearInterval(ele.timer);ele.timer = setInterval(function(){//获取元素的现在位置var begin = parseInt(getStyle(ele, attr));//步长var step = begin + speed;//判断当step>800, 让step = 800//从左往右进⾏移动 --- speed>0 正值//从右往左进⾏移动 --- speed<0 负值// -10 0 10 超过800直接变成 800if(speed<0 && step<target || speed>0 && step>target){step = target;}//赋值元素ele.style[attr] = step + "px";//让元素到达⽬标值时停⽌ 800pxif(step == target){clearInterval(ele.timer);//当move函数执⾏完毕后, 就执⾏它了//当条件都满⾜时才执⾏callback回调函数callback && callback();}},30)//步长是30}第⼀步：我们先来实现那个圆形按钮的点击事件。

多张图片滚动代码大全图片滚动代码(从右向左滚动)<marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src="要滚动的图片地址1"><img border="0" src="要滚动的图片地址2"></marquee>图片滚动代码(从下往上滚动)<marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"><img border="0" src="要滚动的图片地址1"><img border="0" src="要滚动的图片地址2"></marquee>改版：<marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle> <img border="0" src="要滚动的图片地址1"><img border="0" src="要滚动的图片地址2"></marquee>说明：1.direction属性:决定文本的滚动方向，分为向左left和向右right，up和down默认状态向左。

这篇文章主要分享一段js图片不间断滚动的代码,蛮优秀的,需要的朋友可以参考下。

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"/&gt;&lt;title&gt;滚动测试&lt;/title&gt;&lt;script type="text/javascript"&gt;/**&nbsp; &nbsp; * @para obj 目标对象如:demo,deml1,demo2 中的"demo" 可任意，只要不重复&nbsp; &nbsp; *&nbsp; &nbsp; * @para speed 滚动速度越大越慢&nbsp; &nbsp; *&nbsp; &nbsp; * @para direction 滚动方向包括:left,right,down,up&nbsp; &nbsp; *&nbsp; &nbsp; * @para objWidth 总可见区域宽度&nbsp; &nbsp; *&nbsp; &nbsp; * @para objHeight 总可见区域高度&nbsp; &nbsp; *&nbsp;&nbsp; &nbsp; * @para filePath 存放滚动图片的路径(如果是自动获取文件夹里的图片滚动)&nbsp; &nbsp; *&nbsp; &nbsp; * @para contentById 对某id为contentById下的内容进行滚动此滚动与filePath不能共存请注意&nbsp; &nbsp; *&nbsp; &nbsp; * @para 用法实例scrollObject("res",50,"up",470,200,"","resource") 对contentById(resource)下内容进行滚动&nbsp; &nbsp; *&nbsp; &nbsp; * @para 用法实例scrollObject("res",50,"up",470,200,"d:\\images\\","") 对filePath(images)下内容自动获取并进行滚动,目前只支持ie&nbsp; &nbsp; */&nbsp; &nbsp; var $ =function(id){return document.getElementById(id)}&nbsp; &nbsp; // 滚动function scrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById)&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; // 执行初始化if(direction=="up"||direction=="down")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.write(UDStructure());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.write(LRStructure());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var demo = $(obj);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var demo1 = $(obj+"1");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var demo2 = $(obj+"2");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var speed=speed;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(contentById).style.display="none"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;demo.style.overflow="hidden";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;demo.style.width = objWidth+"px";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;demo.style.height = objHeight+"px";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;demo.style.margin ="0 auto";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(filePath!="")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; demo1.innerHTML=file();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(contentById!="")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; demo1.innerHTML=$(contentById).innerHTML;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;demo2.innerHTML=demo1.innerHTML;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 左右滚动function LRStructure()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var _html ="";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;div id='"+obj+"' &gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;tr&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;td nowrap='nowrap' id='"+obj+"1' &gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处是放要滚动的内容&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;/td&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;td nowrap='nowrap' id='"+obj+"2' &gt;&lt;/td&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;/tr&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;/table&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;/div&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return _html;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 上下滚动的结构function UDStructure()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var _html ="";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;div id="+obj+" &gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;tr&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;td id='"+obj+"1' &gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 此处是放要滚动的内容&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;/td&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;/tr&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;tr&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;td id='"+obj+"2' &gt;&lt;/td&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;/tr&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;/table&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+="&lt;/div&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return _html;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 取得文件夹下的图片function file()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tbsource = filePath;//本地文件夹路径&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filePath = filePath.toString();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (filePath=="")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return"";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var imgList ="";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var objFSO =new ActiveXObject('Scripting.FileSystemObject');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 文件夹是否存在if(!objFSO.FolderExists(tbsource))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("&lt;"+tbsource+"&gt;该文件夹路径不存在，或者路径不能含文件名！");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; objFSO =null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var objFolder = objFSO.GetFolder(tbsource);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var colFiles =new Enumerator(objFolder.Files);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var re_inf1 =/\.jpg$/; &nbsp;//验证文件夹文件是否jpg文件&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;for (;!colFiles.atEnd();colFiles.moveNext()) //读取文件夹下文件&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var objFile = colFiles.item();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(re_inf1.test(.toLowerCase()))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imgList +="&lt;img src="+filePath+"/"++"&gt;";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return imgList;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 向左滚function left()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(demo2.offsetWidth-demo.scrollLeft&lt;=0) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;demo.scrollLeft-=demo1.offsetWidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;demo.scrollLeft++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 向右滚function right()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(demo.scrollLeft&lt;=0)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; demo.scrollLeft+=demo2.offsetWidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; demo.scrollLeft--&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 向下滚function down()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(demo1.offsetTop-demo.scrollTop&gt;=0) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; demo.scrollTop+=demo2.offsetHeight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; demo.scrollTop--&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 向上滚function up()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(demo2.offsetTop-demo.scrollTop&lt;=0) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; demo.scrollTop-=demo1.offsetHeight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; demo.scrollTop++&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 切换方向function swichDirection()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch(direction)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case"left":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return left();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case"right":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return right();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case"up":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return up();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return down();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 重复执行var myMarquee=setInterval(swichDirection,speed);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 鼠标悬停&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;demo.onmouseover=function() {clearInterval(myMarquee);}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// 重新开始滚动&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;demo.onmouseout=function() { myMarquee=setInterval(swichDirection,speed);}&nbsp; &nbsp; }&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="img"&gt;&nbsp;&lt;table width="1000" border="0" align="center" cellpadding="5" cellspacing="0"&gt;&nbsp; &lt;tr&gt;&nbsp; &nbsp;&lt;td width="200"&gt;&lt;img src="/attachment/200910/22/4188617_12561994098532.jpg" alt="" width="200" height="150"/&gt;&lt;/td&gt;&nbsp; &nbsp;&lt;td width="200"&gt;&lt;img src="/2008-05-27/2008527145211519_2.jpg" alt="" width="200" height="150"/&gt;&lt;/td&gt;&nbsp; &nbsp;&lt;td width="200"&gt;&lt;img src="/20090823/383152_215728074589_2.jpg" alt="" width="200" height="150"/&gt;&lt;/td&gt;&nbsp; &nbsp;&lt;td width="200"&gt;&lt;img src="/20100628/4643449_170245009531_2.jpg" alt="" width="200" height="150"/&gt;&lt;/td&gt;&nbsp; &nbsp;&lt;td width="200"&gt;&lt;img src="/2008-05-30/20085309524648_2.jpg" alt="" width="200" height="150"/&gt;&lt;/td&gt;&nbsp; &lt;/tr&gt;&nbsp;&lt;/table&gt;&lt;/div&gt;&lt;script type="text/javascript"&gt;scrollObject("sr",50,"right",800,160,"","img")&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;以上就是本文的全部内容。

javascript实现图⽚左右滚动效果【可⾃动滚动，有左右按钮】本⽂实例讲述了javascript实现图⽚左右滚动效果。

分享给⼤家供⼤家参考，具体如下：html代码：<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="renderer" content="webkit"/><meta name="keywords" content=""/><meta name="description" content=""/><title>图⽚滚动</title><style>*{margin:0;padding:0;}ul{list-style:none;}img{border:0;}.scroll{width:358px;height:63px;}.scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg) no-repeat;float:left;}.scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg) left no-repeat;float:left;}.pic{width:312px;height:73px;float:left;}.pic ul{display:block;}.pic li{float:left;display:inline;width:104px;text-align:center;}</style></head><body><div style="margin:100px auto;width:358px;"><div class="scroll"><div class="scroll_left" id="LeftArr"></div><div class="pic" id="scrollPic"><ul><li><a href="#" target="_blank" title=""><img src="images/pic01.png" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic02.jpg" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic03.jpg" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic04.jpg" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic05.jpg" width="100" height="63" alt="" /></a></li><li><a href="#" target="_blank" title=""><img src="images/pic06.jpg" width="100" height="63" alt="" /></a></li></ul></div><div class="scroll_right" id="RightArr"></div></div></div></body></html><script src="scrollPic.js"></script><script>window.onload = function(){scrollPic();}function scrollPic() {var scrollPic = new ScrollPic();scrollPic.scrollContId = "scrollPic"; //内容容器IDscrollPic.arrLeftId = "LeftArr";//左箭头IDscrollPic.arrRightId = "RightArr"; //右箭头IDscrollPic.frameWidth = 312;//显⽰框宽度scrollPic.pageWidth = 104; //翻页宽度scrollPic.speed = 10; //移动速度(单位毫秒，越⼩越快)scrollPic.space = 10; //每次移动像素(单位px，越⼤越快)scrollPic.autoPlay = true; //⾃动播放scrollPic.autoPlayTime = 3; //⾃动播放间隔时间(秒)scrollPic.initialize(); //初始化}</script>scrollPic.js 代码：var sina = {return eval('document.getElementById("' + objName + '")')} else {return eval('document.all.' + objName)}},isIE : navigator.appVersion.indexOf("MSIE") != -1 ? true : false,addEvent : function (l, i, I) {if (l.attachEvent) {l.attachEvent("on" + i, I)} else {l.addEventListener(i, I, false)}},delEvent : function (l, i, I) {if (l.detachEvent) {l.detachEvent("on" + i, I)} else {l.removeEventListener(i, I, false)}},readCookie : function (O) {var o = "",l = O + "=";if (document.cookie.length > 0) {var i = document.cookie.indexOf(l);if (i != -1) {i += l.length;var I = document.cookie.indexOf(";", i);if (I == -1)I = document.cookie.length;o = unescape(document.cookie.substring(i, I))}};return o},writeCookie : function (i, l, o, c) {var O = "",I = "";if (o != null) {O = new Date((new Date).getTime() + o * 3600000);O = "; expires=" + O.toGMTString()};if (c != null) {I = ";domain=" + c};document.cookie = i + "=" + escape(l) + O + I},readStyle : function (I, l) {if (I.style[l]) {return I.style[l]} else if (I.currentStyle) {return I.currentStyle[l]} else if (document.defaultView && document.defaultView.getComputedStyle) { var i = document.defaultView.getComputedStyle(I, null);return i.getPropertyValue(l)} else {return null}}};//滚动图⽚构造函数//UI&UE Dept. mengjia//080623function ScrollPic(scrollContId, arrLeftId, arrRightId, dotListId) {this.scrollContId = scrollContId;this.arrLeftId = arrLeftId;this.arrRightId = arrRightId;this.dotListId = dotListId;this.dotClassName = "dotItem";this.dotOnClassName = "dotItemOn";this.dotObjArr = [];this.pageWidth = 0;this.frameWidth = 0;this.speed = 10;this.space = 10;this.autoPlay = true;this.autoPlayTime = 5;var _autoTimeObj,_scrollTimeObj,_state = "ready";this.stripDiv = document.createElement("DIV");this.listDiv01 = document.createElement("DIV");this.listDiv02 = document.createElement("DIV");if (!ScrollPic.childs) {ScrollPic.childs = []};this.ID = ScrollPic.childs.length;ScrollPic.childs.push(this);this.initialize = function () {if (!this.scrollContId) {throw new Error("必须指定scrollContId.");return};this.scrollContDiv = sina.$(this.scrollContId);if (!this.scrollContDiv) {throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + this.scrollContId + "\")");return};this.scrollContDiv.style.width = this.frameWidth + "px";this.scrollContDiv.style.overflow = "hidden";this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;this.scrollContDiv.innerHTML = "";this.scrollContDiv.appendChild(this.stripDiv);this.stripDiv.appendChild(this.listDiv01);this.stripDiv.appendChild(this.listDiv02);this.stripDiv.style.overflow = "hidden";this.stripDiv.style.zoom = "1";this.stripDiv.style.width = "32766px";if(-[1,]){this.listDiv01.style.cssFloat = "left";this.listDiv02.style.cssFloat = "left";}else{this.listDiv01.style.styleFloat = "left";this.listDiv02.style.styleFloat = "left";}sina.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));sina.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));if (this.arrLeftId) {this.arrLeftObj = sina.$(this.arrLeftId);if (this.arrLeftObj) {sina.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()")); sina.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));sina.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))}};if (this.arrRightId) {this.arrRightObj = sina.$(this.arrRightId);if (this.arrRightObj) {sina.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()")); sina.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));sina.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))}};if (this.dotListId) {this.dotListObj = sina.$(this.dotListId);if (this.dotListObj) {var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4),i,tempObj;for (i = 0; i < pages; i++) {tempObj = document.createElement("span");this.dotListObj.appendChild(tempObj);this.dotObjArr.push(tempObj);if (i == this.pageIndex) {tempObj.className = this.dotClassName} else {tempObj.className = this.dotOnClassName};tempObj.title = "第" + (i + 1) + "页";sina.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))}};if (this.autoPlay) {this.play()}};this.leftMouseDown = function () {if (_state != "ready") {return};_state = "floating";_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)};this.rightMouseDown = function () {if (_state != "ready") {return};_state = "floating";_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)};this.moveLeft = function () {if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth } else {this.scrollContDiv.scrollLeft += this.space};this.accountPageIndex()};this.moveRight = function () {if (this.scrollContDiv.scrollLeft - this.space <= 0) {this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space } else {this.scrollContDiv.scrollLeft -= this.space};this.accountPageIndex()};this.leftEnd = function () {if (_state != "floating") {return};_state = "stoping";clearInterval(_scrollTimeObj);var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;this.move(fill)};this.rightEnd = function () {if (_state != "floating") {return};_state = "stoping";clearInterval(_scrollTimeObj);var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;this.move(fill)};this.move = function (num, quick) {var thisMove = num / 5;if (!quick) {if (thisMove > this.space) {thisMove = this.space};if (thisMove < -this.space) {thisMove = -this.space}};if (Math.abs(thisMove) < 1 && thisMove != 0) {thisMove = thisMove >= 0 ? 1 : -1} else {thisMove = Math.round(thisMove)};var temp = this.scrollContDiv.scrollLeft + thisMove;if (thisMove > 0) {if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth } else {this.scrollContDiv.scrollLeft += thisMove} else {if (this.scrollContDiv.scrollLeft - thisMove <= 0) {this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove} else {this.scrollContDiv.scrollLeft += thisMove}};num -= thisMove;if (Math.abs(num) == 0) {_state = "ready";if (this.autoPlay) {this.play()};this.accountPageIndex();return} else {this.accountPageIndex();setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)}};this.next = function () {if (_state != "ready") {return};_state = "stoping";this.move(this.pageWidth, true)};this.play = function () {if (!this.autoPlay) {return};clearInterval(_autoTimeObj);_autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)};this.stop = function () {clearInterval(_autoTimeObj)};this.pageTo = function (num) {if (_state != "ready") {return};_state = "stoping";var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;this.move(fill, true)};this.accountPageIndex = function () {this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {this.pageIndex = 0};var i;for (i = 0; i < this.dotObjArr.length; i++) {if (i == this.pageIndex) {this.dotObjArr[i].className = this.dotClassName} else {this.dotObjArr[i].className = this.dotOnClassName}}}};参数说明：var scrollPic = new ScrollPic(); //定义变量，并初始化⽅法 scrollContId //滚动容器的ID arrLeftId //左按钮ID arrRightId //右按钮ID frameWidth //显⽰框宽度 pageWidth //翻页宽度 speed //移动速度(单位毫秒，越⼩越快) space //每次移动像素(单位px，越⼤越快) autoPlay //⾃动播放 autoPlayTime //⾃动播放间隔时间(秒) initialize() //初始化完整实例代码点击此处。

Js无缝滚动图片和文字（上下，左右）从下到上：<div id=demo style="overflow:hidden; width:128px; height:300px;"><div id=demo1><ul><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li><li>图片连续循环滚动代码（向上)</li></ul></div><div id=demo2></div></div><script language="javascript">var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetTop-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeightelse{demo.scrollTop++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>从右到左：<div id="demo" style="overflow: hidden; width: 605px; height:100px;margin-left:7px"><table height=100 cellspacing=1 class="roll_img"><tbody><tr><td id=demo1 valign=top><img hspace=1 src="images/24999336.gif" border=0 width="100" height="80" /><img hspace=1 src="images/3b0e743b-3fbe-47c0-88d3-4f43be483c72.gif" border=0 width="100" height="80" /><img hspace=1 src="images/fdeb0f2e26a53dc08a139985.gif" border=0 width="100" height="80" /><img hspace=1 src="images/dnwx1.gif" border=0 width="100" height="80" /><img hspace=1 src="images/1225950981_g.gif" border=0 width="100" height="80" /><img hspace=1 src="images/1261703426-9896.gif" border=0 width="100" height="80" /><img hspace=1 src="images/cty8kdhtlq_w.gif" border=0 width="100" height="80" /></td><td id=demo2 valign=top><img hspace=1 src="images/24999336.gif" border=0 width="100" height="80" /><img hspace=1 src="images/3b0e743b-3fbe-47c0-88d3-4f43be483c72.gif" border=0 width="100" height="80" /><img hspace=1 src="images/fdeb0f2e26a53dc08a139985.gif" border=0 width="100" height="80" /><img hspace=1 src="images/dnwx1.gif" border=0 width="100" height="80" /><img hspace=1 src="images/1225950981_g.gif" border=0 width="100" height="80" /><img hspace=1 src="images/1261703426-9896.gif" border=0 width="100" height="80" /><img hspace=1 src="images/cty8kdhtlq_w.gif" border=0 width="100" height="80" /></td></tr></tbody></table><script type="text/javascript">var speed=30demo2.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></div>。

<script language="javascript">imgArr=new Array()imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true'onMouseout='javascript:outHover=false;mvStart()'><imgsrc=/mapcard/images/LP_card_1.gif border=0></a>"imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true'onMouseout='javascript:outHover=false;mvStart()'><imgsrc=/mapcard/images/LP_card_1.gif border=0></a>"imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true'onMouseout='javascript:outHover=false;mvStart()'><imgsrc=/mapcard/images/LP_card_1.gif border=0></a>"imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true'onMouseout='javascript:outHover=false;mvStart()'><imgsrc=/mapcard/images/LP_card_1.gif border=0></a>"imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true'onMouseout='javascript:outHover=false;mvStart()'><imgsrc=/mapcard/images/LP_card_1.gif border=0></a>"var moveStep=4 //步长，单位：pixelvar moveRelax=100 //移动时间间隔，单位：msns4=(yers)?true:falsevar displayImgAmount=4 //视区窗口可显示个数var divWidth=220 //每块图片占位宽var divHeight=145 //每块图片占位高var startDnum=0var nextDnum=startDnum+displayImgAmountvar timeIDvar outHover=falsevar startDivClipLeftvar nextDivClipRightfunction initDivPlace(){if (ns4){for (i=0;i<displayImgAmount;i++){eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)}for (i=displayImgAmount;i<imgArr.length;i++){eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount) }}else{for (i=0;i<displayImgAmount;i++){eval("document.all.divAds"+i+".style.left="+divWidth*i)}for (i=displayImgAmount;i<imgArr.length;i++){eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount) }}}function mvStart(){timeID=setTimeout(moveLeftDiv,moveRelax)}function mvStop(){clearTimeout(timeID)}function moveLeftDiv(){if (ns4){for (i=0;i<=displayImgAmount;i++){eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=doc ument.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep") }startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right") )if (startDivClipLeft+moveStep>divWidth){eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth) eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount) eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left =0")startDnum=(++startDnum)%imgArr.lengthnextDnum=(startDnum+displayImgAmount)%imgArr.lengthstartDivClipLeft=moveStep-(divWidth-startDivClipLeft)nextDivClipRight=moveStep-(divWidth-nextDivClipRight)}else{eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")startDivClipLeft+=moveStepnextDivClipRight+=moveStep}eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight) }else{for (i=0;i<=displayImgAmount;i++){eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.di vAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")}startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft")) nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight")) if (startDivClipLeft+moveStep>divWidth){eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'") eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.di vAds"+nextDnum+".style.pixelLeft+"+divWidth)startDnum=(++startDnum)%imgArr.lengthnextDnum=(startDnum+displayImgAmount)%imgArr.lengthstartDivClipLeft=moveStep-(divWidth-startDivClipLeft)nextDivClipRight=moveStep-(divWidth-nextDivClipRight)}else{startDivClipLeft+=moveStepnextDivClipRight+=moveStep}eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+start DivClipLeft+")'")eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+" ,0)'")}if (outHover){mvStop()}else{mvStart()}}function writeDivs(){if (ns4){document.write("<ilayer name=divOuter width=750 height="+divHeight+">")for (i=0;i<imgArr.length;i++){document.write("<layer name=divAds"+i+">")document.write(imgArr[i]+" ")document.write("</layer>")}document.write("</ilayer>")document.close()for (i=displayImgAmount;i<imgArr.length;i++){eval("document.divOuter.document.divAds"+i+".clip.right=0")}}else{document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")for (i=0;i<imgArr.length;i++){document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")document.write(imgArr[i]+" ")document.write("</div>")}document.write("</div>")for (i=displayImgAmount;i<imgArr.length;i++){eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'") }}}</script><BODY onload=javascript:mvStart()><SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>。

js轮播图代码分享_大家喜爱的js轮播图片效果，分享给大家。

一、要点：1.页面加载时，图片重合，叠在一起[肯定定位];2.第一张显示，其它隐蔽;3.设置下标,给下标设置颜色让它随图片移动;4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，连续轮播;二、实现代码：html代码:!DOCTYPE htmlhtml xmlns="l"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8"/title轮播图/titlelink href="css/LunBimg.css" rel="stylesheet" /script src="js/jquery-1.10.2.min.js"/scriptscript src="js/LunBimg.js"/script/headbodydiv id="allswapImg"div class="swapImg"img src="image/1.jpg" //div div class="swapImg"img src="image/2.jpg" //div div class="swapImg"img src="image/3.jpg" //div div class="swapImg"img src="image/4.jpg" //div div class="swapImg"img src="image/5.jpg" //div div class="swapImg"img src="image/6.jpg" //div /divdiv class="btn btnLeft"/divdiv class="btn btnRight"/divdiv id="tabs"div class="tab bg"1/divdiv class="tab"2/divdiv class="tab"3/divdiv class="tab"4/divdiv class="tab"5/divdiv class="tab"6/div/div/body/htmlcss代码：* {padding:0px;margin:0px;}.swapImg {position:absolute;}.btn {position:absolute;height:90px;width:60px;background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透亮度为50%*/color:#ffffff;text-align:center;line-height:90px;font-size:40px;top:155px;/*图片高度400/2-45*/cursor:pointer;/*display:none;*/}.btnRight {left:840px;/*图片宽度900-导航宽度60*/}#tabs {position:absolute; top:370px;margin-left:350px; }.tab {height:20px;width:20px;background:#05e9e2; line-height:20px; text-align:center; font-size:10px;float:left;color:#ffffff;margin-right:10px; border-radius:100%; cursor:pointer;}.bg {background:#00ff21; }js代码：/// reference path="_references.js" /var i = 0;//全局变量//定义一个变量用来猎取轮播的过程var time;$(function (){//1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐蔽$(".swapImg").eq(0).show().siblings().hide();showTime();//当鼠标放到下标上显示该图片，鼠标移走连续轮播$(".tab").hover(function (){//猎取到当前鼠标所在的下标的索引i = $(this).index();show();//鼠标放上去之后，怎么停止呢？猎取到变量的过程，清除轮播，把变量传进去clearInterval(time);}, function (){showTime();});//要求四，当我点击左右切换$(".btnLeft").click(function (){//1.点击之前要停止轮播clearInterval(time);//点了之后，-1if (i == 0){i =6;}i--;show();showTime();});$(".btnRight").click(function () { //1.点击之前要停止轮播clearInterval(time);//点了之后，-1if (i == 5) {i = -1;}i++;show();showTime();});});function show() {//$("#allswapImg").hover(function ()//{// $(".btn").show();//}, function ()//{// $(".btn").hide();//});//fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s$(".swapImg").eq(i).fadeIn(300).siblings().fadeOut( );$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");}function showTime(){time = setInterval(function () {i++;if (i == 6) {//只有6张图片，所以i不能超过6，假如i等于6时，我们就让它等于第一张i = 0;}show();}, 3000);}以上就是本文的全部内容，盼望对大家的学习有所关心...。

<!-- 指向链接图片的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>。

JS图⽚⾃动或者⼿动滚动效果（⽀持left或者up）在谈组件之前来谈谈今天遇到搞笑的事情，今天上午接到⼀个杭州电话 0571-******** 即说是杭州⼈民法院的貌似说我⽤招商银⾏信⽤卡在今年的6⽉23⽇借了招商银⾏19800元⼈民币，今天是最后⼀天没有还款，说我其他银⾏钱都被冻结了。

以后有可能法律投诉我！我靠我⽆语啊我长这么⼤从来都没有办理过信⽤卡，我根本就不需要办理信⽤卡，所以⼀直以来也没有办过，招商⼀卡通是有⼀张但是从来没有借过钱啊，⾝份证⼀直都⾝上带着！基本上没有脱离过⾝，今天我打电话过去他问我叫什么名字我就报了名字我问是什么情况然后说了很多⼤概意思就是刚刚上⾯的意思然后他接着问我⾝份证号是多少？我就没有告诉他，我今天就半信半疑我到银⾏取下钱看看是不是真的我的卡被冻结了结果我所有的银⾏卡都没有被冻结。

我怀疑有可能是骗⼈的，如果有杭州的朋友可以试试打上⾯的电话然后随便报个假名字让他们查下看看他们怎么说？就知道了！快过年了我也在这希望⼤家不要被⼀些⼈骗了，年底⼩⼼骗⼦(骗⼦很多的)。

不多说了，下⾯来看看我这个JS效果原理吧！1. 开始获取每次滚动的个数，如果参数item(int整形数字)传进来，就取参数item个数否则的话个数count = 取外层容器宽度(或⾼度) / 每个li 宽度(或⾼度)。

然后判断⽅向如果是left(向左) 那么⽗级容器宽度ul * 2，否则的话ul⾼度*2. 然后计算下⼀次滚动多少距离。

如果⽅向是left 那么值的计算 = ("li",wrap).outerWidth() * _cache.count(也就是当前⼀个li的宽度*滚动的个数)。

如⽅向是top 那么值的计算 = ("li", wrap).outerHeight() * _cache.count(⼀个li的⾼度*滚动的个数)。

2. 下⼀页按钮事件的原理：默认是auto(⾃动播放)，不断向下⼀页滚动，_scrollNext函数的原理：如果⽅向是left 那么marginLeft:动画(animate)移动多少距离。