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

1. 图片翻页特效：

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

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

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

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

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

　//用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＞

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

php程序里如何实现图片翻页,php图片上传代码一例-php 生成翻页链接(页码)列表的...-带多种分页方式的php分页类_169IT.COM...
Class PAGE { //类开始 /******************************************************** * $total 记录总数 * $ ...
html图片 3d切换特效,一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 实现的代码. html代码: Bedouin Blue-green Dram ...
python爬取百度图片——翻页式网站爬取
小编大约于这个月月初写的这一份代码,但很不幸,大概20号,再次找百度图片翻页流的时候,发现是瀑布流且回不去了,还好代码里面留了翻页流的网址所以,现在来分享给大家. 语言:python3.6 库:re ...
上传pdf文件转图片翻页小工具，遇到JSP form中type=file的文件上传及后台Part处理问题(后台取值为null)
最近公司要求做一个上传pdf文件后将文件转换为翻页图片的小工具,我是这么做的 1.先找图片翻页的demo,微软有现有的产品turn.js感兴趣的可以自己看一下 ,有双页的有单页的,因为我司要求手机端使 ...
python翻页_如何用python tkiner实现图片翻页功能
如何用python tkiner实现图片翻页功能发布时间:2020-06-26 12:52:59 来源:亿速云阅读:108 作者:Leah 如何用python tkiner实现图片翻页功能?针对这 ...
Html5图片翻页制作,HTML5超酷名片盒风格3D翻页图片画廊
在前面我们讲解了一个使用纯CSS制作3D百叶窗效果,今天我们要来制作一个类似名片盒的3D翻页图片画廊.在这个效果中,我们将使用一个HTML5 range输入框元素来控制图片画廊的前后翻页.这个rang ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
小程序swiper怎么让内容撑开高度_小程序瀑布流组件：支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...

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

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

最新文章

热门文章