网页特效——图片翻页和图片滚动的实现方法

1. 图片翻页特效：

效果：多张图片逐个翻页显示，也可用鼠标点击图片区域下方的页码手动翻页。每张图片上都可添加链接引向不同位置的帖子。

演示：在专刊盛世奥运之奢华盘点上半部分中间“华美谢幕”那部分有演示，请点击专刊查看。

代码：
这段代码不是原创，而是我从其他网页上截取的代码片断，根据自己需要做了修改，并且添加了注释。
绿色部分是注释，蓝色部分是Javascript代码
拷贝代码使用时，绿色注释部分可保留，不影响代码效果。因为搜狐论坛不能完整显示网页代码，因此我用中文尖括号＜＞替代英文尖括号，以便代码可以正常显示。拷贝代码使用时，所有尖括号＜请替换成<，所有尖括号＞请替换成>。

＜script type=text/javascript＞
＜!--

　//定义图片展示区域宽度，图片制作时尺寸应与之吻合，具体宽度456可根据需要更改
　var focus_width = 465;　　
　
　//定义图片展示区域高度，图片制作时尺寸应与之吻合，具体高度309可根据需要更改
　var focus_height = 309　　

　//定义动画展示区域高度，无需修改，直接拷贝即可
　var swf_height = focus_height;　　

　//定义图片地址，不同图片地址用竖线“|”分隔开，图1-图6将循环翻页显示
　//例：var pics='图1地址|图2地址|图3地址|图4地址|图5地址|图6地址'
　//图1-图6的具体图片地址可根据需要更改
　var pics='http://image1.club.sohu.com/pic/2c/bf/hxzy17bad114940ae70c.jpg|http:
//image1.club.sohu.com/pic/2a/2c/hxzy46b149bcbe0c5523.jpg|http://image1.
club.sohu.com/pic/ec/4c/hxzyc1b1753b537f6318.jpg|http://image1.club.sohu
.com/pic/77/be/hxzy6691c527216b9379.jpg|http://image1.club.sohu.com/pic/
6e/c8/hxzyc7fab6902cd7493b.jpg|http://image1.club.sohu.com/pic/87/63/
hxzy4adf549af5477b83.jpg'

　//定义图片链接到的帖子地址，不同帖子地址用竖线“|”分隔开，分别点击图1-图6将打开不同帖子
　//例：var links='帖子1地址|帖子2地址|帖子3地址|帖子4地址|帖子5地址|帖子6地址'
　//帖子1-帖子6的具体帖子地址可根据需要更改
　var links='http://club.yule.sohu.com/r-hot-905015-0-1-0.html|http://club.yule
.sohu.com/r-hot-905015-0-1-0.html|http://club.yule.sohu.com/r-hot-905015-
0-1-0.html|http://club.yule.sohu.com/r-hot-905015-0-1-0.html|http://club.
yule.sohu.com/r-hot-905015-0-1-0.html|http://club.yule.sohu.com/r-hot-905
015-0-1-0.html'

　//用Flash方式实现图片翻页动画，定义Flash控件宽度和高度，无需修改，直接拷贝即可
　document.write('＜object classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 codebase=http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 width='+ focus_width +' height='+ swf_height +'＞');

　//用Flash方式实现图片翻页动画，定义Flash控件模版
　//仅Flash背景颜色可根据需要更改，其他代码无需修改，直接拷贝即可
　//Flash背景颜色定义在以下代码末尾，这个便是＜param name=bgcolor value=#ff5f0a＞，可根据需要将颜色编码#ff5f0a更改为其它颜色编码
　document.write('＜param name=allowScriptAccess value=sameDomain＞＜param name=movie value=http://mat1.qq.com/bb/flash/focus.swf＞ ＜param name=quality value=high＞＜param name=bgcolor value=#ff5f0a＞');

　//用Flash方式实现图片翻页动画，设置Flash上的图片和帖子链接，无需修改，直接拷贝即可
　document.write('＜param name=menu value=false＞＜param name=wmode value=opaque＞');
　document.write('＜param name=FlashVars value=pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+'＞');

　//用Flash方式实现图片翻页动画，定义Flash控件模版
　//仅图片翻页时Flash背景颜色可根据需要更改，其他代码无需修改，直接拷贝即可
　//图片翻页时Flash背景颜色定义在以下代码中部，这个便是bgcolor=#ff5f0a，可根据需要将颜色编码#ff5f0a更改为其它颜色编码
　document.write('＜embed src=http://mat1.qq.com/bb/flash/focus.swf wmode=opaque FlashVars=pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+' menu=false bgcolor=#ff5f0a quality=high width='+ focus_width +' height='+ swf_height +' allowScriptAccess=sameDomain type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer /＞');
　document.write('＜/object＞');

//--＞
＜/script＞

2. 图片滚动特效：

效果：多张图片自右向左循环滚动显示，当鼠标移动到图片上时图片停止滚动，当鼠标移到图片以外区域时，图片继续自右向左循环滚动。每张图片上都可添加链接引向不同位置的帖子。

演示：在专刊盛世奥运之奢华盘点底部“再见北京”那部分有演示，请点击专刊查看。

代码：
这段代码不是原创，而是我从其他网页上截取的代码片断，根据自己需要做了修改，并且添加了注释
绿色部分是注释，蓝色部分是Javascript代码，其余是html代码
拷贝代码使用时，绿色注释部分需删除，否则影响代码效果。因为搜狐论坛不能完整显示网页代码，因此我用中文尖括号＜＞替代英文尖括号，以便代码可以正常显示。拷贝代码使用时，所有尖括号＜请替换成<，所有尖括号＞请替换成>。

　//定义图片滚动区域宽度，具体宽度913可根据需要更改，但要保证所有小图片宽度之和大于滚动区域宽度。
　//注意id=scrollpic这部分不要更改，会被下面的JavaScript代码用到
　＜div id=scrollpic style=overflow: hidden; width:913px;＞
　　
　　＜table cellspacing=0 cellpadding=0 align=center border=0＞
　　　＜tr＞

　　　　//注意id=scrollpic1这部分不要更改，会被下面的JavaScript代码用到
　　　　＜td id=scrollpic1＞
　　　　　＜table border=0 cellpadding=0 cellspacing=0＞
　　　　　　＜tr＞
　　　　　　＜tr＞

　　　　　　　//定义图1地址，图1的具体图片地址可根据需要更改
　　　　　　　//例：src=图1地址
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/02/06/hxzy38a37ad660911a22.jpg /＞＜/td＞

　　　　　　　//定义图2地址，图2的具体图片地址可根据需要更改
　　　　　　　//例：src=图2地址
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/df/2e/hxzycd25c5d21ec914fa.jpg /＞＜/td＞

　　　　　　　//定义图3-图10地址，图3-图10的具体图片地址可根据需要分别更改
　　　　　　　//例：src=图3地址
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/86/7c/hxzy1d6b9dbd31037dd7.jpg /＞＜/td＞
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/e4/87/hxzy8a23effe3f101f4b.jpg /＞＜/td＞
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/e5/f8/hxzy3c238da78778cd67.jpg /＞＜/td＞
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/74/78/hxzya257d79c0c8f5635.jpg /＞＜/td＞
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/95/09/hxzy89a7cc1d2f4444ea.jpg /＞＜/td＞
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/63/64/hxzy9644fc02748b3064.jpg /＞＜/td＞
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/54/7c/hxzy62056924145d076f.jpg /＞＜/td＞
　　　　　　　＜td width=185 ＞＜img src=http://image1.club.sohu.com/pic/b0/bc/hxzy3530eaebb527a0b8.jpg /＞＜/td＞

　　　　　　＜/tr＞
　　　　　＜/table＞
　　　　＜/td＞

　　　//注意id=scrollpic2这部分不要更改，会被下面的JavaScript代码用到
　　　＜td id=scrollpic2＞＜/td＞

　　　＜/tr＞
　　＜/table＞
　＜/div＞

＜script type=text/javascript＞

　//定义图片滚动速度，具体速度15可根据需要更改
　var speed=15;

　//定义图片滚动方向，自右向左水平滚动，无需修改，直接拷贝即可
　scrollpic2.innerHTML=scrollpic1.innerHTML;
　function Marquee()
　{
　　if(scrollpic2.offsetWidth-scrollpic.scrollLeft＜=0)
　　　scrollpic.scrollLeft-=scrollpic1.offsetWidth;
　　else
　　　scrollpic.scrollLeft++;
　}
　var MyMar=setInterval(Marquee,speed);
　scrollpic.οnmοuseοver=function() {clearInterval(MyMar);}
　scrollpic.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed);}
＜/script＞