神马文学网*****浅显易学的走马灯图片制作
来源：百度文库 编辑：神马文学网 时间：2024/04/27 12:30:08
最近，在朋友们之间往来，发现博客页面有滚动的图片非常漂亮，也非常羡慕，期盼有朝一日自己的页面也能装上，来撑撑门面。所以，近期笔者就留意在网上寻觅其代码，找到后尝试了几次，都没有成功。由于时间忙，抽不出来身，也就放弃了。今天是周末，笔者再次进行了尝试，并获得了成功。
为了报答喜欢我的博友长期对我的支持和帮助，以及结识更多的新朋友，现就把滚动的图片如何能装在自己博客的页面上，无私奉献给你们，希望你们能够喜欢。
（需要说明的是：这套源代码不是笔者原创，而是对其进行了修改、增加和完善，并对其相关知识点进行了解读，还附有具体操作要点。这是笔者通过实践证实了如下代码的可操作性，在某种程度上来说，也是笔者的一种劳动的结果。同时，也是你们很难找到的，是真的，请你们亲自尝试一下。具体如下：）
一、滚动效果
二、以上套滚动的图片代码
三、解读代码知识点
1、：这是代码后缀部分，就不用管了，让它始终睡在那里好了。
四、操作要点
1、关于图片地址
以前我没有成功，主要就差在如何选择图片地址上。这对以前的我和初学者来说是最难对付的，也是最难找的、最难确定的一个环节，不信，你就自己找吧。其实，找图片地址很简单，只要鼠标对准你要选择的图片，点击右键——选择属性——点击后——图片的地址就在上面显示，同时，也有图片的大小，等等。但对于你自己博客中的的图片，点击到一张相片的界面后，在按上述的方法查找地址。对于其他照片也是如此。
2、关于镶嵌图片大小的确认
我们都知道，图片的大小千变万化，大小不一，而自定义的栏目却是固定的。如果不采取一定的技巧，你装入的图片就会走形，不美观，所以本人的技巧如下：还是举例说明吧，这样比较直观易懂。如：图片为1024*768：表示这张图片大小为长1024，高768，那1024/768==1.3333，这是一个比例，你要装入的图片固定高=260后，那长=260*1.3333=347。以此类推，错不了。
最后，再让我们来看以下几组不同的效果图,通过几次的推敲你一定会领悟其中的奥妙...祝你成功!
风景效果图:
清明上河图代码:
注:未完,将不断更新漂亮的效果图.实际操作中,如有技术问题请给我留言
再补充说明一下:
1.添加滚动的图片 (水平）
代码为:
2.滚动图片的代码是：(向上）
其中一个....
为一个单元，想添加更多图片滚动可以复制，格式很清楚了，但是多了会影响速度。为了报答喜欢我的博友长期对我的支持和帮助，以及结识更多的新朋友，现就把滚动的图片如何能装在自己博客的页面上，无私奉献给你们，希望你们能够喜欢。
（需要说明的是：这套源代码不是笔者原创，而是对其进行了修改、增加和完善，并对其相关知识点进行了解读，还附有具体操作要点。这是笔者通过实践证实了如下代码的可操作性，在某种程度上来说，也是笔者的一种劳动的结果。同时，也是你们很难找到的，是真的，请你们亲自尝试一下。具体如下：）
一、滚动效果
二、以上套滚动的图片代码
三、解读代码知识点
1、：这是代码后缀部分，就不用管了，让它始终睡在那里好了。
四、操作要点
1、关于图片地址
以前我没有成功，主要就差在如何选择图片地址上。这对以前的我和初学者来说是最难对付的，也是最难找的、最难确定的一个环节，不信，你就自己找吧。其实，找图片地址很简单，只要鼠标对准你要选择的图片，点击右键——选择属性——点击后——图片的地址就在上面显示，同时，也有图片的大小，等等。但对于你自己博客中的的图片，点击到一张相片的界面后，在按上述的方法查找地址。对于其他照片也是如此。
2、关于镶嵌图片大小的确认
我们都知道，图片的大小千变万化，大小不一，而自定义的栏目却是固定的。如果不采取一定的技巧，你装入的图片就会走形，不美观，所以本人的技巧如下：还是举例说明吧，这样比较直观易懂。如：图片为1024*768：表示这张图片大小为长1024，高768，那1024/768==1.3333，这是一个比例，你要装入的图片固定高=260后，那长=260*1.3333=347。以此类推，错不了。
最后，再让我们来看以下几组不同的效果图,通过几次的推敲你一定会领悟其中的奥妙...祝你成功!
风景效果图:
清明上河图代码:
注:未完,将不断更新漂亮的效果图.实际操作中,如有技术问题请给我留言
再补充说明一下:
1.添加滚动的图片 (水平）
代码为:
2.滚动图片的代码是：(向上）
其中一个
其中，direction是方向，up=上，down=下，left=左，right=右，都可以按你的需要进行改动；width 是宽度，height是 高度，可以根据自己的需要修改； scrollAmount 控制移动的速度,数字越大速度越快。
还有更精彩的立体滚动图片,等你点击呢-立体滚动图片的制作
耳目一新的图片屏风开合效果代码
效果图如下：
原始代码如下:
代码用法说明：
兰色http://image11.360doc.com/DownloadImg/2010/06/1609/3608596_18.jpg为图片地址，您可以替换为自己的图片.图片地址找法：鼠标右键单击图片---属性--地址（URL）后面的地址就是。替换代码中的图片地址，即可制作出属于您自己的个性图片效果！