您的位置：360文档中心› 不间断滚动图片网页制作源码

不间断滚动图片网页制作源码

合集下载

滚动图片制作方法

滚动图片制作方法
<IMG src="这里链接图片URL地址"></IMG>
<IMG src="这里链接图片URL地址"></IMG>
<IMG src="这里链接图片URL地址"></IMG>
<IMG src="这里链接图片URL地址"></IMG>
<IMG src="这里链接图片URL地址"></IMG>
<IMG src="这里链接图片URL地址"></IMG>
</MARQUEE></SPAN></P></TD></TR></TBODY></TABLE><A href="/m/kongfu" target=_blank>.</A></DIV>
2*把滚动图片放在网页左右两边：
3）、代码中的图片可以设置成多张，形成连续的滚动效果。
代码如下：
<MARQUEE scrollAmount=5 direction=right><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0></A></MARQUEE>

Javascript实现图片不间断滚动的代码

Javascript实现图片不间断滚动的代码

这篇文章主要分享一段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代码实现图片循环滚动效果

JavaScript代码实现图⽚循环滚动效果1.概述循环滚动图⽚，不仅可以增添Web页⾯的动态效果，⽽且可以节省页⾯空间，有效地保证在有限的页⾯中显⽰更多的图⽚。

2.技术要点主要应⽤setTimeout()⽅法实现图⽚的循环滚动效果。

setTimeout()⽅法的语法格式如下：setTimeout（function,milliseconds,[arguments]）参数说明：a. function：要调⽤的JavaScript⾃定义函数名称。

b. Milliseconds：设置超时时间（以毫秒为单位）。

功能：经过超时时间后，调⽤函数。

此值可以⽤clearTimeout()函数清除。

3.具体实现（1）在页⾯的合适位置添加⼀个id属性为demo的<div>标记，并在该标记中添加表格及要要滚动显⽰的图⽚。

关键代码如下：<div id="demo" style=" overflow: hidden; width: 455px; height: 166px;"><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" id="marquePic1"><!-- 要循环滚动的图⽚ --><table width="455" border="0" align="center" cellpadding="0" cellspacing="0" ><tr align="center"><%for(int i=1;i<8;i++){%><td> <img src="Images/<%=i%>.jpg" width="118" height="166" border="1"> </td><%}%></tr></table></td><td id="marquePic2" width="1"></td></tr></table></div>（2）编写⾃定义的JavaScript函数move()，⽤于实现⽆间断的图⽚循环滚动效果。

DIV+CSS+JS不间断横向滚动实现代码

DIV+CSS+JS不间断横向滚动实现代码

DIV+CSS+JS不间断横向滚动实现代码DIV+CSS+JS实现不间断横向滚动代码复制代码代码如下:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>横向不间断滚动DIV CSS代码-DIVCSS5</title></head><body><style>.scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}.scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; }#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横排 */</style><script language="javascript">function ScrollImgLeft(){var speed=20var scroll_begin = document.getElementById("scroll_begin");var scroll_end = document.getElementById("scroll_end");var scroll_div = document.getElementById("scroll_div");scroll_end.innerHTML=scroll_begin.innerHTMLfunction Marquee(){if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)scroll_div.scrollLeft-=scroll_begin.offsetWidthelsescroll_div.scrollLeft++}var MyMar=setInterval(Marquee,speed)scroll_div.onmouseover=function() {clearInterval(MyMar)}scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}}</script><h2 align="center"><a href="/">DIVCSS5</a>演⽰说明：向左滚动</h2><div style="text-align:center"><div class="sqBorder"><!--#####滚动区域#####--><div id="scroll_div" class="scroll_div"><div id="scroll_begin"><ul><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" alt="div css" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" alt="divcss" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" alt="CSS" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li><li><a href="/"><img src="/img/css-logo.gif" alt="divcss5" /></a></li><li><a href="/"><img src="/img/css-logo.gif" /></a></li></ul></div><div id="scroll_end"></div></div><!--#####滚动区域#####--></div><script type="text/javascript">ScrollImgLeft();</script> </div><!--//向左滚动代码结束--></body></html>。

网页图片轮转javascript代码

网页图片轮转javascript代码

图片轮转javascript代码1.简单的图片轮转（红色字体是修改地方）<script language=Javascript><!-- // BannerADvar bannerAD=new Array();var adNum=0;bannerAD[0]="images/1.jpg";bannerAD[1]="images/2.jpg";bannerAD[2]="images/3.jpg";bannerAD[3]="images/4.jpg";var preloadedimages=new Array();for (i=1;i<bannerAD.length;i++){preloadedimages[i]=new Image();preloadedimages[i].src=bannerAD[i];}function setTransition(){if (document.all){bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.ra ndom()*23);bannerADrotator.filters.revealTrans.apply();}}function playTransition(){if (document.all)bannerADrotator.filters.revealTrans.play()}function nextAd(){if(adNum<bannerAD.length-1)adNum++ ;else adNum=0;setTransition();document.images.bannerADrotator.src=bannerAD[adNum]; playTransition();theTimer=setTimeout("nextAd()", 5000);}//--></script><IMG style="FILTER: revealTrans(duration=2,transition=20)" src="images/1.jpg" width="398" height="250"border=0 name=bannerADrotator><script language=Javascript>nextAd()</script>2.复杂的图片轮转（红色字体是修改地方）效果图2.1编写一个静态网页（调用lunzhuan.js）<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>测试</title><style type="text/css">*{ margin:0px; padding:0px;}#ceshi{ width:300px; height:225px; margin:0 auto; border:1px red solid;}</style></head><body><div id="ceshi"><script language="JavaScript" src="images/lunzhuan.js"></script></div></body></html>2.2编写lunzhuan.js文件存放在images文件夹内<!--var widths=300; //焦点图片宽var w=0;var widthss=widths+w;var heights=225; //焦点图片高var heightss=heightss+w;var heightt=0;var counts=6; //总条数//img1=new Image();在这里是声明了一个图片元素的对象//后面是对图像的属性进行赋值或设置,如imgs.src="xxxx.jpg"是指定图片的索引地址.//这个代码一般用于head区,用于预加载图片,即加快图片显示.//只有用new Images()得到的图片IE7才认,img1=new Image();img1.src='images/1.jpg';url1=new Image();url1.src='http://localhost/';txt1=new Image();txt1.txt='我是11111111111';img2=new Image();img2.src='images/2.jpg'; url2=new Image();url2.src='http://localhost/'; txt2=new Image();txt2.txt='我是2222222222';img3=new Image();img3.src='images/3.jpg'; url3=new Image();url3.src='http://localhost/'; txt3=new Image();txt3.txt='我是3333333333';img4=new Image();img4.src='images/4.jpg'; url4=new Image();url4.src='http://localhost/'; txt4=new Image();txt4.txt='我是4444444444'; img5=new Image();img5.src='images/5.jpg'; url5=new Image();url5.src='http://localhost/'; txt5=new Image();txt5.txt='我是5555555555'; img6=new Image();img6.src='images/6.jpg'; url6=new Image();url6.src='http://localhost/'; txt6=new Image();txt6.txt='我是6666666666'; var nn=1; //当前所显示的滚动图var key=0; //标识是否为第一次开始执行var tt; //标识作用function change_img()if(key==0){key=1;} //如果第一次执行KEY=1，表示已经执行过一次了。

网页图片无缝循环滚动html代码

网页图片无缝循环滚动html代码

图片循环滚动代码图片无缝滚动代码先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

先了解一下对象的几个的属性：innerHTML:设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度向上滚动的代码：<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><tab le align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2function Marquee(){if(demo2.offsetHeight-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>向下滚动：<div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><tab le align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(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>向左滚动：<div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><tab le align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div> <script>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 id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><tab le align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div> <script>var speed=30demo2.innerHTML=demo1.innerHTMLfunction 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><!--无缝向左循环代码开始--><div id="mhmove" style="overflow:hidden;width:800px;margin:0 auto 0;"> <table width="800px" border="0" cellspacing="0" cellpadding="0"> <tr><td width="800px" id="mhmove1"><table width="800px" border="0" cellpadding="0" cellspacing="0"><tr><td width="166" align="center"><img src="tupian/gumushi1538.4m.jpg"width="166" height="117" border="0" usemap="#Map2" /></td><td width="166" align="center"> <img src="tupian/tupian1/pingchuanghe7[1].jpg" width="166" height="117" border="0" usemap="#Map"/></td><td width="166" align="center"><img src="tupian/tupian1/1[2].jpg" width="166" height="117" border="0" usemap="#Map3" /></td><td width="166" align="center"><img src="tupian/tupian1/6[1].jpg" width="166" height="117" border="0" usemap="#Map4" /></td><td width="172" align="center"><img src="tupian/tupian1/92[1].jpg" width="166" height="117" border="0" usemap="#Map5" /></td><td width="172" align="center"><img src="tupian/dujuan_da2.jpg" width="166" height="117" border="0" usemap="#Map6" /></td></tr></table></td><td width="50" id="mhmove2">&nbsp;</td></tr></table></div><script>var speed=40 ;mhmove2.innerHTML=mhmove1.innerHTML;function Marquee3(){if(mhmove2.offsetWidth-mhmove.scrollLeft<=0)mhmove.scrollLeft-=mhmove1.offsetWidth;else{mhmove.scrollLeft++;}}function Marquee4(){if(mhmove2.offsetHeight-mhmove.scrollTop<=0)mhmove.scrollTop-=mhmove1.offsetHeight;else{mhmove.scrollTop++;}}var MyMar2=setInterval(Marquee3,speed);mhmove.onmouseover=function() {clearInterval(MyMar2)}mhmove.onmouseout=function(){MyMar2=setInterval(Marquee3,speed)}</script><!--无缝循环代码结束-->。

网站首页图片轮转代码，很好用

网站首页图片轮转代码，很好用

网站首页图片轮转代码，很好用网站首页图片轮转代码聪明的朋友可以把它用到自己的网店里面做装修，非常好用的代码如下，注释的地方需要改变即可<SCRIPT><!--以下分别是，宽，高，图片数，间隔时间-->var widths =500;var heights =410;var counts =6;var times = 4000;<!--以下12行代码中的如：/07.jpg ，改成自己需要的图片URL 即可，下面一部分的链接换成商品的地址即可-->img1=new Image ();img1.src='/07.jpg';img2=new Image ();img2.src='/06.jpg';img3=new Image ();img3.src='/05.jpg';img4=new Image ();img4.src='/04.jpg';img5=new Image ();img5.src='/03.jpg';img6=new Image ();img6.src='/02.jpg';url1=new Image ();url1.src='/';url2=new Image ();url2.src='/';url3=new Image ();url3.src='/';url4=new Image ();url4.src='/';url5=new Image ();url5.src='/';url6=new Image ();url6.src='/';//联盟商贸技术支持友情提供var nn=1;var key=0;function change_img(){if(key==0){key=1;}else if(document.all){document.getElementByIdx("pic").filters[0].Apply();document.getElementByIdx("pic").filters[0].Play(duration=2);}eval_r('document.getElementByIdx("pic").src=img'+nn+'.src' );eval_r('document.getElementByIdx("url").href=url'+nn+'.src' );for (var i=1;i<=counts;i++){document.getElementByIdx("xxjdjj"+i).className='axx';}document.getElementByIdx("xxjdjj"+nn).className='bxx';nn++;if(nn>counts){nn=1;}tt=setTimeout('change_img()',4000);}function changeimg(n){nn=n;window.clearInterval(tt);change_img();}document.write('<style>');document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');document.write('</style>');document.write('<divstyle="width:'+widths+'px;height:'+heights+'px;overflow:hidde n;text-overflow:clip;">');document.write('<div><a id="url" target="_blank"><img id="pic"style="border:0px;filter:progid:dximagetransform.microsoft.wip e(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');document.write('<divstyle="filter:alpha(style=1,opacity=10,finishOpacity=80);backgr ound: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;marg in:0px;border:0px;">');for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}document.write('</div></div>');change_img();</SCRIPT>。

网页图片轮播代码

网页图片轮播代码

网页图片轮播代码（同时适用SharePointDesigner）<script language="javascript">j=0;function show(){for(ii=1;ii<6;ii++){document.getElementById("pic"+ii).style.display="none";document.getElementById("Submit"+ii).style.backgroundColor='';}j++if(j==6){j=1;}document.getElementById("pic"+j).style.display="block";document.getElementById("Submit"+j).style.backgroundColor='blue';a=setTimeout('show()',1000);}function pic(pic){clearTimeout(a);for(var i=1;i<=5;i++){if(i==pic){document.getElementById("pic"+pic).style.display="block";document.getElementById("Submit"+pic).style.backgroundColor='blu e';j=i}else {document.getElementById("pic"+i).style.display="none";document.getElementById("Submit"+i).style.backgroundColor='';}}a=setTimeout('show()',1000);}</script><style type="text/css">input{ background-color:white; border:#FF0000border: 0px;margin: 0px;padding: 0px;height: 20px;width: 20px;font-size: 14px;}</style><body onLoad="show()"><table width="461" height="163"><tr><td width="426" rowspan="7"><img id="pic3" style="display:none"src="image/class1-2.jpg" ><img id="pic1" src="image/class1-3.jpg"><img id="pic2" style="display:none" src="image/class1-1.jpg"><img id="pic4" style="display:none" src="image/class1-4.jpg"><img id="pic5" style="display:none" src="image/class1-5.jpg"></td> <td height="15"> </td></tr><tr><td><input type="button" name="Submit1" value="1"onClick="pic('1')"></td></tr><tr><td><input type="button" name="Submit2" value="2" onClick="pic('2')" /></td></tr><tr><td><input type="button" name="Submit3" value="3" onClick="pic('3')" /></td></tr><tr><td><input type="button" name="Submit4" value="4" onClick="pic('4')" /></td></tr><tr><td><input type="button" name="Submit5" value="5" onClick="pic('5')" /></td></tr><tr><td height="15"> </td></tr></table>。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<div style="WIDTH: 740px; OVERFLOW: hidden; align: center" id=demo> <table border=0 cellSpacing=0 cellPadding=0>
<tbody>
<tr>
<td id=marquePic1 vAlign=top>{#modCpPic#} </td>
<td id=marquePic2 vAlign=top></td></tr></tbody></table></div>
<script type=text/javascript>
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed) //每隔0.03秒调用一次函数demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
innerHTML是inner里的HTML内容
object.scrollLeft和object.offsetWidth 是什么意思呀
scrollLeft: 获取 object 这个对象的左边界和窗口中目前可见内容的最左端之间的距离
offsetWidth: object 对象自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

一个可以传递给Window.clearInterval() 从而取消对code 的周期性执行的值。

setInterval动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。

可以使用本动作更新来自数据库的变量或更新时间显示。

相关文档
最新文档