注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 

如何制作多张图片的滚动呢?  

2008-12-25 05:23:14|  分类: 滚动图片的制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

   

如何制作多张图片的滚动呢? - 寒冬腊月 - .
 
将向博客新手详细解讲制作过程
撰文:寒冬腊月 

如何制作多张图片的滚动呢? - 寒冬腊月 - .

如何制作多张图片的滚动呢? - 寒冬腊月 - .

 

如何制作多张图片的滚动呢? - 寒冬腊月 - .

 

   上一讲中,我着重讲解了单张图片的制作方法及解析了它的代码构成与用法.   

如何制作多张图片的滚动呢? - 寒冬腊月 - .

     今天,我将重点解讲多张图片的滚动制作及代码的添加方法.为全面讲解多张图片滚动代码.

如何制作多张图片的滚动呢? - 寒冬腊月 - .

    首先,让我们以下面五张美媚的图片为素材,来组成多张图片的多样化滚动制作方法.

       素材图片如下:

                    如何制作多张图片的滚动呢? - 寒冬腊月 - .如何制作多张图片的滚动呢? - 寒冬腊月 - .如何制作多张图片的滚动呢? - 寒冬腊月 - .如何制作多张图片的滚动呢? - 寒冬腊月 - .如何制作多张图片的滚动呢? - 寒冬腊月 - .

 以上八张图片地址分别如下: (也可直接点击每一地址,查看原图片.)

1、http://img.blog.163.com/photo/C9pA5X7WVlre66LSbCPhzQ==/1735011756445656956.jpg

2、http://img.blog.163.com/photo/Tz7KeKi2qimyheIVbvA3EA==/1735011756445656955.jpg

3、http://img.blog.163.com/photo/L9QevEkukBAaB2ByTb3qeA==/1735011756445656954.jpg

4、http://img.blog.163.com/photo/Hq7A8-YuvQK2gA_cagVgMQ==/1735011756445656953.jpg

5、http://img.blog.163.com/photo/GSxJVQ1KV1mGH8XiyyEsKg==/2263903237684916868.jpg

如何制作多张图片的滚动呢? - 寒冬腊月 - .

二、多张图片的滚动代码解析:

1、从上一讲单张图片的滚动制作中,你或许感到代码的神奇应用了.其实多张图片滚动代码也是在单张滚动图片代码上再添加图片地址而得来的.

2、我们还是以单滚代码来讲解.先看下面的单滚代码:

单张图片滚动代码如下:

<MARQUEE scrollAmount=4 scrollDelay=60 width=680 height=260><IMG src="http://img.blog.163.com/photo/W1byYmccis79nM_YqCog-Q==/2581969961367935308.jpg" width=173  border=0></MARQUEE>

3、如果你想增加更的图片而进行滚动,只需在单滚代码中添加:

 <IMG src="

http://img.blog.163.com/photo/C9pA5X7WVlre66LSbCPhzQ==/1735011756445656956.jpg" width=173  border=0>

即可.现在我们先来看一组两张图片的滚动代码.把这段添加的代码添加单滚代码中,则原代码就变成了一组二图片滚动代码了.如下:

<MARQUEE scrollAmount=4 scrollDelay=60 width=740 height=260><IMG src="

http://img.blog.163.com/photo/C9pA5X7WVlre66LSbCPhzQ==/1735011756445656956.jpg" width=173  border=0>

<IMG src="

http://img.blog.163.com/photo/Tz7KeKi2qimyheIVbvA3EA==/1735011756445656955.jpg" width=173  border=0></MARQUEE>

4、接下来,你就可以把这段代码放到日记代码框或首页自定义模块中就行了.

效果图如下:

如何制作多张图片的滚动呢? - 寒冬腊月 - . 如何制作多张图片的滚动呢? - 寒冬腊月 - .

 5、到这里为止,你也许对制作滚动图有了一定的了解.悟到了代码的神奇应用.对于你制作多张图的滚动就不再困难了.下面为一组五张图片的滚动的代码.原始代码:

最原始代码如下:

<MARQUEE scrollAmount=4 scrollDelay=60 direction=left width=740 height=60>

<IMG src="图片地址1" >

<IMG src="图片地址2" >

<IMG src="图片地址3" >

<IMG src="图片地址4" >

<IMG src="图片地址5" >

</MARQUEE>

 注:只要选好图片并上传至相册或直接选好图片地址;将图片地址依次放到上面的代码里;然后复制并粘贴到代码框内即可;

五张滚动效果图如下:  如何制作多张图片的滚动呢? - 寒冬腊月 - . 如何制作多张图片的滚动呢? - 寒冬腊月 - . 如何制作多张图片的滚动呢? - 寒冬腊月 - . 如何制作多张图片的滚动呢? - 寒冬腊月 - . 如何制作多张图片的滚动呢? - 寒冬腊月 - .

如何制作多张图片的滚动呢? - 寒冬腊月 - .

需要说明的是:

滚动的图片,每增加一张,就增加该张的图片地址,随意增加,直到不让你增加为止. 其中:

height="190":数字“190”表示相片的高度,可随意调整,但不能超过自定义板块的高度.

width="173":数字“173”表示相片的底边宽度,可随意调整,但不能超过自定义板块的宽度.

http://img.blog.163.com/photo/W1byYmccis79nM_YqCog-Q==/2581969961367935308.jpg这是你需要相片的网址,可随意调整。

3、</marquee>:这是代码后缀部分,就不用管了,让它始终睡在那里好了.

如何制作多张图片的滚动呢? - 寒冬腊月 - .

三、操作要点:

 1、关于图片地址:其实,找图片地址很简单,只要鼠标对准你要选择的图片,点击右键——选择属性——点击后——图片的地址就在上面显示,同时,也有图片的大小,等等。但对于你自己博客中的的图片,点击到一张相片的界面后,在按上述的方法查找地址。对于其他照片也是如此。

 2、关于镶嵌图片大小的确认。我们都知道,图片的大小千变万化,大小不一,而自定义的栏目却是固定的。如果不采取一定的技巧,你装入的图片就会走形,不美观,所以本人的技巧如下:还是举例说明吧,这样比较直观易懂。如:图片为1024*768:表示这张图片大小为长1024,高768,那1024/768==1.3333,这是一个比例,你要装入的图片固定高=260后,那长=260*1.3333=347。以此类推,错不了。

如何制作多张图片的滚动呢? - 寒冬腊月 - .

 相关文章链接:

如何制作多张图片的滚动呢? - 寒冬腊月 - .

如何制作多张图片的滚动呢? - 寒冬腊月 - .

如何制作多张图片的滚动呢? - 寒冬腊月 - .

如何制作多张图片的滚动呢? - 寒冬腊月 - .

  ◇单张图片『滚动』的制作方法◇   ◇多张图片『滚动』的制作◇
  ◇图中图移动的制作方法◇   ◇如何用图片制作来回滚动友情链接◇
  ◇滚动图片加链接的制作方法◇   ◇多图滚动加链接的制作方法◇ 
  ◇图片屏风开合滚动的制作◇   ◇如何侧边栏多图片向上滚动的代码◇
  ◇图片『倒影+雾化』效果的制作◇   ◇图片移动代码集锦◇
  ◇滚动.透明.对开图制作   ◇用u5制作滚动的图片效果◇
  ◇滚动图片的代码解析◇   ◇怎样做文字图片的链接◇
   ◇所有代码的粘贴方法◇   ◇怎样找准图片的正确网址◇
 ◇博客首页‘自定义模块的添加◇   ◇怎样分享别人的模块◇
如何制作多张图片的滚动呢? - 寒冬腊月 - . 

如何制作多张图片的滚动呢? - 寒冬腊月 - . 

   如何制作多张图片的滚动呢? - 寒冬腊月 - .

如何制作多张图片的滚动呢? - 寒冬腊月 - .

如何制作多张图片的滚动呢? - 寒冬腊月 - .
新手入门篇 文字类制作 图片类制作 日历、时钟制作
博客素材类 "边框"的制作 u5 教程 PS 教程
情感天地 生活常识 教子必读 音画欣赏
男人女人 测算运气 驾车技巧 幽默笑话
●新手入门篇●/●文字类制作●/●图片类制作●/●日历、时钟制作类●/●博客制作(素材类)●/●"边框"的制作●

如何制作多张图片的滚动呢? - 寒冬腊月 - .

     点击进入   在我的博客,更多精彩等着你!

如何制作多张图片的滚动呢? - 寒冬腊月 - .

如何制作多张图片的滚动呢? - 寒冬腊月 - .

 如何制作多张图片的滚动呢? - 寒冬腊月 - .

 

  评论这张
 
阅读(9207)| 评论(10)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017