如何制作可控制的网页的滚动图片(网页制作图片滚动特效)

如何制作可控制的网页的滚动图片,网页制作图片滚动特效

内容导航：

网页上怎么制作滚动的图片

怎么能制作滚动图片了谁能告诉我吗可不要软件啊

网页如何制作多张图片滚动

网页制作 图片滚动

一、网页上怎么制作滚动的图片

图片跑马灯效果如果使用标签就会出现图片滚动时出现空白的地方，页面会变的不怎么顺畅！
但是使用div层实现图片跑马灯效果就会使图片衔接的很紧凑，页面效果也会美观点！如下例：（src填写你的图片路径）;这个就是在表格里面添加的div标签，在你想要添加的表格处加上和下面一样的div层就可以了，javascript代码放在最后（即上面即可）

|

—|—

二、怎么能制作滚动图片了谁能告诉我吗可不要软件啊

你说的是不是GIF格式图片啊,如果你想制作这类图片,要用到软件的,.html
到这里去下载,这个很简单易用./?searchType=&so;=gif这里有更多有关制作GIF图片的软件,去看看吧.你说的是跑马灯那种效果的吧,用JSP可以实现的

三、网页如何制作多张图片滚动

答：＆lt;marquee＆gt;图片1＆＃160;图片2＆＃160;图片3图片。。。＆lt;/marquee＆gt;参数：direction表示滚动的方向，值可以是left，right，up，down，默认为leftbehavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）loop表示循环的次数，值是正整数，默认为无限循环scrollamount表示运动速度，值是正整数，默认为6scrolldelay表示停顿时间，值是正整数，默认为0，单位是毫秒align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middlebgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100%height为标签内元素的高度hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。onmouseover=()onmouseout=()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

四、网页制作 图片滚动

答：打开Dreamweaver8，新建一网页文件，并保存为名为“＆quot;文件。切换至代码编辑界面，输入如下代码：＆lt;body＆gt;＆lt;divid=＆quot;photo-
list＆quot;＆gt;＆lt;ulid=＆quot;scroll＆quot;＆gt;＆lt;li＆gt;＆lt;ahref=＆quot;＃＆quot;＆gt;＆lt;imgsrc=＆quot;images/＆quot;width=＆quot;100px＆quot;height=＆quot;100px＆quot;alt=＆quot;＆quot;/＆gt;＆lt;/a＆gt;＆lt;/li＆gt;＆lt;li＆gt;＆lt;ahref=＆quot;＃＆quot;＆gt;＆lt;imgsrc=＆quot;images/＆quot;width=＆quot;100px＆quot;height=＆quot;100px＆quot;alt=＆quot;＆quot;/＆gt;＆lt;/a＆gt;＆lt;/li＆gt;＆lt;li＆gt;＆lt;ahref=＆quot;＃＆quot;＆gt;＆lt;imgsrc=＆quot;images/＆quot;width=＆quot;100px＆quot;height=＆quot;100px＆quot;alt=＆quot;＆quot;/＆gt;＆lt;/a＆gt;＆lt;/li＆gt;＆lt;li＆gt;＆lt;ahref=＆quot;＃＆quot;＆gt;＆lt;imgsrc=＆quot;images/＆quot;width=＆quot;100px＆quot;height=＆quot;100px＆quot;alt=＆quot;＆quot;/＆gt;＆lt;/a＆gt;＆lt;/li＆gt;＆lt;li＆gt;＆lt;ahref=＆quot;＃＆quot;＆gt;＆lt;imgsrc=＆quot;images/＆quot;width=＆quot;100px＆quot;height=＆quot;100px＆quot;alt=＆quot;＆quot;/＆gt;＆lt;/a＆gt;＆lt;/li＆gt;＆lt;li＆gt;＆lt;ahref=＆quot;＃＆quot;＆gt;＆lt;imgsrc=＆quot;images/＆quot;width=＆quot;100px＆quot;height=＆quot;100px＆quot;alt=＆quot;＆quot;/＆gt;＆lt;/a＆gt;＆lt;/li＆gt;＆lt;/ul＆gt;＆lt;/div＆gt;＆lt;/body＆gt;对应效果如图所示：新建一CSS样式表文件，并将该文件保存到与“”相同的目录下，文件名称为“＆quot;。在新建的样式表文件＆quot;”文件中输入如下代码：{padding:0;margin:0;}/设置所有对像的内边距为0/body{text-
align:center;}/设置页面居中对齐/＃photo-
list{/6张图片的宽度（包含宽度、padding、border、图片间的留白）计算：6(100+22+12+9)-9之所以减去9是第6张图片的右边留白/width:681px;/图片的宽度（包含高度、padding、border）计算：100+22+12/height:106px;margin:50pxauto;overflow:hidden;/溢出部份将被隐藏/border:1pxdashed＃ccc;}＃photo-
listul{list-style:none;}＃photo-listli{float:left;padding-right:9px;}＃photo-
listimg{border:1pxsolid＃ddd;background:＃fff;padding:2px;}对应文件内容如图所示：在网页文件＆quot;＆quot;中添加对该样式表的引用：＆lt;linkrel=＆quot;stylesheet＆quot;type=＆quot;text/css＆quot;href=＆quot;＆quot;＆gt;此时网页效果如图所示：新建一个JS文件，并将该文件另存为“＆quot;。在”“文件中输入如下所示代码：varid=function(el){returntById(el);},c=id(＆＃39;photo-
list＆＃39;);if(c){varul=id(＆＃39;scroll＆＃39;),lis=tsByTagName(＆＃39;li＆＃39;),itemCount=,width=lis[0].offsetWidth,//获得每个img容器的宽度marquee=function(){t+=2;if(t%width＆lt;=1){//当t和width相等时，把第一个img追加到最后面ld(tsByTagName(＆＃39;li＆＃39;)[0]);t=0;};},speed=50;//数值越大越慢=width*itemCount+＆＃39;px＆＃39;;//加载完后设置容器长度vartimer=setInterval(marquee,speed);er=function(){clearInterval(timer);};t=function(){timer=setInterval(marquee,speed);};};然后在主页文件＆quot;”中添加对该“”文件的引用。＆lt;scripttype=＆quot;text/javascript＆quot;src=＆quot;＆quot;＆gt;＆lt;/script＆gt;代码如图所示：打开“”网页文件，最终效果如果所示：