您的位置：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>。

html无缝轮播图完整代码

html无缝轮播图完整代码

html⽆缝轮播图完整代码<!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=utf-8"/><title>轮播图⽆缝滚动</title><style type="text/css">*{ padding:0; margin:0; list-style:none; border:0;}.all{width:500px;height:200px;padding:7px;border:1px solid #ccc;margin:100px auto;position:relative;}.screen{width:500px;height:200px;overflow:hidden;position:relative;}.screen li{ width:500px; height:200px; overflow:hidden; float:left;}.screen ul{ position:absolute; left:0; top:0px; width:3000px;}.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}.all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}.all ol li.current{ background:yellow;}/*#arr {display: none;}*/#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'⿊体'; font-size:30px; color:#fff; opacity:0.3; #arr #right{right:5px; left:auto;}</style></head><body><div class="all" id='all'><div class="screen" id="screen"><ul id="ul"><li><img src="images/1.jpg" width="500" height="200"/></li><li><img src="images/2.jpg" width="500" height="200"/></li><li><img src="images/3.jpg" width="500" height="200"/></li><li><img src="images/4.jpg" width="500" height="200"/></li><li><img src="images/5.jpg" width="500" height="200"/></li></ul><ol></ol><div id="arr"><span id="left"><</span><span id="right">></span></div></div></div></body></html><script>//需求：⽆缝轮播图//步骤：//1.⽼三步。

平面网页滚动图片代码

平面网页滚动图片代码

<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>。

不间断循环滚动图片代码

不间断循环滚动图片代码
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
</div>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
<img src="gfjs.gif"><br><img src="bxtt.gif"><br><img src="bzjd.gif"><br>
//上下滚动图片这样排布可以 如果左右滚动 必须放在表格里布局才行
demo2.innerHTML=demo1.innerHTML //将demo1中的内容复制到demo2
function Marquee(){ //开始定义滚动函数
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth //如果滑动块的位置大于demo2的宽度,滑动块退回一个demo2的宽度

网页中滚动多张图片特效

网页中滚动多张图片特效

注意: 各参数详解：（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）蓝色地方是图片地址，可以换上自己喜欢的图片。

向上循环<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.“图片地址”表示图片的属性地址粘贴处（因本人太懒，所以所有的滚动图片都只用一张代替；(*^__^*)，当然，每个“图片地址”都可以换上不同的图片地址，效果会更好。

html+CSS实现图片轮播

html+CSS实现图片轮播

html+CSS实现图⽚轮播要使⽤html+css实现⽹站轮播，代码如下⾸先引⼊bootstrap外包裹div class="carousel" data-ride="carousel"创建轮播，使⽤carousel类，让图⽚动起来data-ride="carousel"内部第⼀层，轮播图⽚<div class="carousel-inner"><div class="carousel-item active">img</div><div class="carousel-item">img</div><div class="carousel-item">img</div></div>需要使⽤div把所有图⽚包裹，使⽤类名carousel-inner每⼀个img还需要包裹⼀个div,使⽤carousel-itemcarousel-item ---->display:none;把所有图⽚隐藏.carousel-item.active 会把隐藏的div显⽰在carousel-item内部，可以添加div.carousel-caption添加⽂字内测第⼆部分，导航标识符使⽤ul class="carousel-indicators".carousel-indicators>li 样式已经写好，并且随着图⽚轮播，改变表⽰但是不能点击便是改变图⽚li class="active" 背景变为⽩⾊，被激活的li点击li，改变图⽚在li中 data-slide-to="0" 图⽚的下标data-target="#当前轮播图ID"内部第三部分：左右箭头a class=" carousel-control-prev"画的左箭头<span class="carousel-control-prev-icon">a class=" carousel-control-next"画的右箭头<span class="carousel-control-next-icon">需要事件，data-slide="prev/next" data-target="#轮播图ID"。

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

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

<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=30marquePic2.innerHTML=marquePic1.innerHTMLfunction 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() 被调用或窗口被关闭。

JS实现单张或多张图片持续无缝滚动的示例代码

JS实现单张或多张图片持续无缝滚动的示例代码

JS实现单张或多张图⽚持续⽆缝滚动的⽰例代码背景：想要实现图⽚持续滚动，既然使⽤js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑⼀下，可以⼀像素⼀像素的感动，则很平滑，如果加了过渡动画，当图⽚重置为0时，会有往回倒的动画效果，跟预期不符。

原理：图⽚滚动原理同图⽚轮播原理，同样也适⽤于⽂字滚动等⼀系列滚动，通过复制最后⼀张图⽚或最后⼀堆⽂字插⼊第⼀⾏，或复制第⼀张图⽚或⼀堆⽂字插⼊在结尾，来实现⽆缝拼接，前提：1、必须是没有设置过渡动画的，2、重置为0的时候与当前已经滚动到的⾼度对于图⽚的位置⽽⾔⾁眼看上去没变化。

实现：html主要包含三块：1、最外层盒⼦，⽤来展⽰滚动图的区域，overflow:hidden;2、滚动的盒⼦，主要改变该盒⼦的定位值，来实现滚动，⾥⾯包含所有要滚动的图⽚或⽂字3、包含图⽚或⽂字的盒⼦。

代码：class Roll {constructor(opts) {this.elem = opts.elem; // 图⽚包含滚动长度的元素的this.elemBox = opts.elemBox; //图⽚展⽰区域元素，为了获取展⽰区域的⾼度this.direction = opts.direction;this.time = opts.time;this.init();this.roll = this.roll.bind(this)this.startRoll = this.startRoll.bind(this)this.stopRoll = this.stopRoll.bind(this)}init(){this.elemHeight = this.elem.offsetHeight;this.elemHtml = this.elem.innerHTML;this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;this.speed;// 如果向上滚或者向左滚动每次减1，向下滚或者向右滚动每次加1if(this.direction === 'top' || this.direction === 'left'){this.speed = -1;}else{this.speed = 1;}}roll(){switch (this.direction) {case "top":// 如果滚动的盒⼦的top值超出元素的⾼度，则置为0if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){this.elemBox.style.top = 0;}else{this.elemBox.style.top = this.elemBox.offsetTop + this.speed + 'px';}break;case "bottom":// 如果滚动的盒⼦的bottom值超出元素的⾼度，则置为0if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){this.elemBox.style.bottom = 0;}else{this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + 'px';}break;case "left":// 如果滚动的盒⼦的left超出元素的⾼度，则置为0if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){this.elemBox.style.left = 0;}else{this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + 'px';}break;case "right":// 如果滚动的盒⼦的right超出元素的⾼度，则置为0if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){this.elemBox.style.right = 0;}else{this.elemBox.style.right = this.elemBox.offsetRight + this.speed + 'px';}break;default:// 默认向上滚动，如果滚动的盒⼦的top超出元素的⾼度，则置为0if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){this.elemBox.style.top = 0;}else{this.elemBox.style.top = this.elemBox.offsetTop + speed + 'px';}}}stopRoll(){clearInterval(this.scrollTimer)}startRoll(){this.scrollTimer = setInterval(this.roll,this.time)}}参考链接：总结到此这篇关于JS实现单张或多张图⽚持续⽆缝滚动的⽂章就介绍到这了,更多相关js 图⽚⽆缝滚动内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

简单的动态网页源代码

简单的动态网页源代码

if currentpage<1 then
currentpage=1
end if
if (currentpage-1)*MaxPerPage>totalput then
if (totalPut mod MaxPerPage)=0 then
currentpage= totalPut \ MaxPerPage
</tr>
</table></td>
<td id=demo12></td>
</tr>
</table>
</div>
<SCRIPT>
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft<=0)
星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
</script></div>
2
<SCRIPT language=JavaScript src="js/openfullwin.js"></SCRIPT>
3
<div id="jnkc" class="d12">
<table cellpadding=0 align=left border=1 cellspace="0" bordercolor="#ffffff">
  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动作的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。

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

相关文档
最新文档