很多朋友对于html图片循环滚动代码和网页图片滚动代码不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
一、在网页中怎样实现图片无限循环滚动效果
在网页设计过程中，为了更好的展示产品，通常都会制作一些带有无限滚动效果的图片，充分的利用这一网页效果，能够突显网站的影响力，达到事半功倍的效果。实现图片无限循环滚动效果也是网页设计者必备之基本技能。下面让我们一起来学习一下实现图片滚动效果的制作方法。
素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，小编也准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。
打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。
切换至代码编辑界面，输入如下代码： bodydiv id="photo-list" ul id="scroll" lia href="#"img src="images/1.jpg" width="100px" height="100px" alt=""//a/li lia href="#"img src="images/2.jpg" width="100px" height="100px" alt=""//a/li lia href="#"img src="images/3.jpg" width="100px" height="100px" alt=""//a/li lia href="#"img src="images/4.jpg" width="100px" height="100px" alt=""//a/li lia href="#"img src="images/5.jpg" width="100px" height="100px" alt=""//a/li lia href="#"img src="images/6.jpg" width="100px" height="100px" alt=""//a/li /ul/div/body对应效果如图所示：
新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。
在新建的样式表文件"MyStyle.css”文件中输入如下代码：*{ padding:0; margin:0;} /*设置所有对像的内边距为0*/ body{ text-align:center;} /*设置页面居中对齐*/#photo-list{/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）计算：6*(100+2*2+1*2+9)- 9之所以减去9是第6张图片的右边留白*/ width:681px;/*图片的宽度（包含高度、padding、border）计算：100+2*2+1*2*/ height:106px; margin:50px auto; overflow:hidden; /*溢出部份将被隐藏*/ border:1px dashed#ccc;}#photo-list ul{ list-style:none;}#photo-list li{ float:left; padding-right:9px;}#photo-list img{ border:1px solid#ddd; background:#fff; padding:2px;}对应文件内容如图所示：
在网页文件"index.html"中添加对该样式表的引用： link rel="stylesheet" type="text/css" href="MyStyle.css"此时网页效果如图所示：
新建一个JS文件，并将该文件另存为“MoveEffect.js"。
在”MoveEffect.js“文件中输入如下所示代码： var id= function(el){ return document.getElementById(el); }, c= id('photo-list'); if(c){ var ul= id('scroll'), lis= ul.getElementsByTagName('li'), itemCount= lis.length, width= lis[0].offsetWidth,//获得每个img容器的宽度 marquee= function(){ c.scrollLeft+= 2; if(c.scrollLeft% width= 1){//当 c.scrollLeft和 width相等时，把第一个img追加到最后面 ul.appendChild(ul.getElementsByTagName('li')[0]); c.scrollLeft= 0;};}, speed= 50;//数值越大越慢 ul.style.width= width*itemCount+'px';//加载完后设置容器长度 var timer= setInterval(marquee, speed); c.onmouseover= function(){ clearInterval(timer);}; c.onmouseout= function(){ timer= setInterval(marquee, speed);};};
然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。 script type="text/javascript" src="MoveEffect.js"/script代码如图所示：
打开“index.html”网页文件，最终效果如果所示：
二、html图片向左无缝隙循环滚动代码
animation:move12sinfinitelinear;
-webkit-animation:move12sinfinitelinear;
-webkit-animation-play-state:paused;/*动画暂停播放*/
<li><ahref="#"><imgsrc="img/1.jpg"border="0"/></a></li>
<li><ahref="#"><imgsrc="img/2.jpg"border="0"/></a></li>
<li><ahref="#"><imgsrc="img/3.jpg"border="0"/></a></li>
<li><ahref="#"><imgsrc="img/4.jpg"border="0"/></a></li>
<li><ahref="#"><imgsrc="img/5.jpg"border="0"/></a></li>
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
1、animation-name：指定要绑定到选择器的关键帧的名称。
2、animation-duration：动画指定需要多少秒或毫秒完成。
3、animation-timing-function：设置动画将如何完成一个周期。
linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in-out：动画以低速开始和结束。
cubic-bezier(n,n,n,n)：在 cubic-bezier函数中自己的值。可能的值是从 0到 1的数值。
4、animation-delay：设置动画在启动前的延迟间隔。
5、animation-iteration-count：定义动画的播放次数。
n：一个数字，定义应该播放多少次动画。
infinite：指定动画应该播放无限次（永远）。
三、如何在HTML中实现图片的滚动效果
1、<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="第一张图片地址"><IMG src="第二张图片地址"></MARQUEE>
2、1) scrollAmount。它表示速度，值越大速度越快。
3、2)加入onmouseover=stop() onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。
4、用<a href=>和</a>把<img>包围，并且img必须设border=0，否则图片会出现边框。例子如下：
5、<MARQUEE scrollAmount=3 loop=infinite deplay="0"><a href="链接网址"><img src="图片网址" border=0></a></MARQUEE>
6、<MARQUEE width=宽 height=高 onmouseover=stop() onmouseout=start() scrollAmount=速度 loop=infinite deplay="0"><img src="图片地址"><img src="图片地址">···</MARQUEE>
7、<marquee behavior="scroll" direction=up width="宽" height="高" scrollamount="5" onmouseout="this.start()"><img src="图片网址"><img src="图片网址">···</marquee>
8、<marquee behavior="scroll" direction=up width="120" height="60" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()"><a target="cont" href="连接地址"><img src="http://图片地址" idth="88" height="33" border="0"></a><a target="cont" href="连接地址"><img src="图片地址" width="88" height="33" border="0"></a></marquee>
四、html图片无缝滚动代码怎么写
marquee和js两种方法，我建议使用js的，marquee兼容性不好，只兼容IE浏览器。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<TITLE>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE>
用marquee实现首尾相连循环滚动效果（仅IE）：<br/><br/>
<MARQUEEbehavior="scroll"contenteditable="true"onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"scrollamount="3"width="100"><SPANunselectable="on"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"></SPAN></MARQUEE>
<br/><br/>用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br/><br/>
<DIVid="scrollobj"style="white-space:nowrap;overflow:hidden;width:500px;"><span>这里是要滚动的内容</span></DIV>
<scriptlanguage="javascript"type="text/javascript">
if(obj.scrollLeft==tmp)obj.innerHTML+=obj.innerHTML;
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if(obj.scrollLeft>=obj.firstChild.offsetWidth)obj.scrollLeft=0;
setInterval("scroll(document.getElementById('scrollobj'))",20);
</HTML>
望采纳！
五、JavaScript代码实现图片循环滚动效果
循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。
主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：
setTimeout（function,milliseconds,[arguments]）
function：要调用的JavaScript自定义函数名称。
Milliseconds：设置超时时间（以毫秒为单位）。
功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。
（1）在页面的合适位置添加一个id属性为demo的<div>标记，并在该标记中添加表格及要要滚动显示的图片。关键代码如下：
（2）编写自定义的JavaScript函数move()，用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快，具体代码如下：
marquePic2.innerHTML=marquePic1.innerHTML;
demo=document.getElementById("demo");
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=demo.scrollLeft+n;
MyMar=setInterval("Marquee(5)",speed);
MyMar=setInterval("Marquee(5)",speed);
以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
六、在HTML里图片从右到左循环滚动。而且不间断的。是什么写
marquee标签可以实现这个效果，代码如下：
<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()"></marquee>
1、<marquee></marquee>中间的内容可以为文字，图片，也可以是由程序生成的文字或图片
2、onMouseOut="this.start()"：用来设置鼠标移出该区域时继续滚动
onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动
设定<marquee>标签内容的对齐方式
absbottom：绝对底部对齐（与g、p等字母的最下端对齐）
文章到此结束，如果本次分享的html图片循环滚动代码和网页图片滚动代码的问题解决了您的问题，那么我们由衷的感到高兴！
