今天,我们来试玩一样东西,这个东西叫图片切换滚动,其实贴切一点应该叫图片轮播。时下图片轮播作为web方面在各大网站已经非常流行,这种图片轮播非常经典,前段时间花了两天写了像一个QQ视频网站看到的效果。
参考效果地址:http://v.qq.com/music/index.html
要想玩,但是我比较懒,所以在分解他们效果的时候,顺便查询网站里面一个xml里面的数据,只是为了演示作用,故此只是借用了他们的xml数据内容。
查看:http://v.qq.com/music/pic.xml里面的xml信息可以查看到里面图片和描述 以及一些视频地址链接。我们只是需要获取到里面数据并进行分析保存起来。
主类执行:
调用URLLoader 类对其xml 进行读取,读取完毕后,把数据转至photoItem 类,把需要的数据设置一下,如链接,图片地址,和文字描述。 在设置图片位置的时候,记录他们位置,以便在时间间隔调用的时候,进行切换下一个位置。
轮播当中需要工作:使用时间调度方式让图片进行轮播,
点击图片的时候可以进行轮播
点击中间图片的时候跳转到相应的链接处
切换图片时候 需要对图片进行暗处理,并隐藏主要文字
切换位置的时候,使用TweenLite进行轮播到下一个位置,
判断左右切换的方向。
深度排序
初始化图片的时候记录初始位置
流程:
加载xml数据-->实例化效果-->实例化图片元件,并赋予数据--->进行时间调度切换
当中交互里面,经常涉及到左右两只切换的方式,这两种方式使用频率比较高,在coverFlow 和一些轮播当中使用制作需要解决这两种交互的做法。
制作这个效果之前,当时参考了双链表的方式来制作,但是在制作的时候,双链表并没有完全满足个人需求,于是采用循环链表来替代制作,这种结构对付这种效果十分有意思,借助队列思想 和链表当中思维结合, 可以帮助我们解决实际上一些交互的难题。
图片元件:记录xml 当中描述,设置图片地址,和图片显示。id是图片标记
播放按钮图标:使用绘图api绘制
交互当中常用接口:
轮播效果主实现方法:当中使用了循环链表。
让其实现左右切换的交互。
获取xml 数据:
配置文件
循环链表使用:
节点:
记录他们参数
除了这个之后,我们可以观看到百度视频当中的,也有这种flash制作,他们的特点是实用,替换数据方便,显示效果也比较有意思。
不妨去参考他们的swf 来尝试制作一个属于自己轮播效果。
http://video.baidu.com/hd/index/
分享到:
相关推荐
flash焦点图片滚动特效制作 flash图片切换滚动带3D立体动画效果, 带左右按钮控制图片左右切换滚动, 图片xml文件外部调用, 含flash源码免费下载。
flash焦点图片滚动特效制作flash图片切换滚动带3D立体动画效果,带左右按钮控制图片左右切换滚动,图片xml文件外部调用,含flash源码免费下载。
flash焦点图片滚动特效制作flash图片切换滚动带3D立体动画效果,带左右按钮控制图片左右切换滚动,图片xml文件外部调用,含flash源码免费下载。
flash图片特效制作banner焦点图片3D立体动画轮播滚动效果,带索引切换按钮,可以随意切换图片滚动。图片xml文件外部调用
jQuery仿动感flash自动滚动图片切换广告插件.rar
jQuery仿动感flash自动滚动图片切换广告插件 jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) jquery仿苏宁易购商城产品图片全方位展示功能 jquery制作漂亮按钮示例打包 jQuery动态切换网页背景的大块...
flash焦点图特效大图和小图按顺序切换效果,鼠标滑过小图对应大图3D flash图片切换效果,带左右按钮控制flash图片切换滚动。
Flash定时向上滚动,自动切换图片,也可手动控制,图片批次滚动,图片列表中的图片可点击右上角的NEXT按钮适时切换,也可不操作鼠标的状态下,自动切换,动画效果流畅,来自韩国购物网站的Flash图文列表特效。
flash flash图片轮换 图片轮换 图片切换 图片滚动
flash焦点图特效大图和小图按顺序切换效果,鼠标滑过小图对应大图3D flash图片切换效果,带左右按钮控制flash图片切换滚动。
用flash特效制作一个焦点图片切换多种滤镜效果,支持图片轮播和图片外调等,适用于网站焦点图片切换轮播。 对此插件给出评语,有积分哦.
一款jquery网页图片切换,焦点图特效,类似Flash一样的带有文字动画的图片轮显,文字动画依次出现,图片随即出现,十分不错的效果。运行时全屏显示,左右铺满整个屏幕,左侧和右侧有手动播放的控制按钮,整体上就像...
带模糊特效的Flash焦点图切换特效,还有3D风格,当图片切换到当前显示时,由模糊变清淅,其它图片则变为模糊状态。XML中的相关参数配置说明: x_radiusX x_radiusY 图片之间的距离参数 x_centerX x_centerY ...
左右滚动式样式新颖的图片切换,其实可用于广告图切换,或Banner切换,两端有箭头控制,可以显示文字描述,采用xml作为配置文件,调用方法在示例文件内。想体验平滑流畅的图片切换特效,Flash是最佳选择哦。
个性Flash焦点图切换特效动画,看一看这款Flash图片切换的控制按钮在哪里?在左上角,显示成了方格,鼠标点击对应的方格大图片就会自动切换,从设计风格来看,也是挺唯美的感觉,切换方式:由下向上滚动、由左向右...
仿淘宝上下翻滚的jquery图片切换特效,纯JS代码,无flash,方便大小的修改
Flash翻滚切换的网页焦点图特效,当切换至当前张的时候,可看到对应的数字按钮下边会显示下划线,右下角的小按钮,可控制图片上一张、下一张切换显示,图片修饰了边框,看上去视觉效果更酷一些。基于Flash8打造。
Flash 三维图片展示特效,基于强大的Flash动画 脚本ActionScripts,操作时候,拖动滚动条,即可展开图片,展开后呈现三维立体效果,同时切换当前图片,可用于图片索引,也就是图片列表效果。
105:3d图片墙flash+xml 下载 106:360度旋转展示flash+xml 下载 107:带翻页的JS图片切换效果 下载 108:JS三图横向平滑切换下载 109:四屏切换JS广告代码下载 110:JavaScript图片切换效果 下载 111:在线客服代码 ...
105:3d图片墙flash+xml 下载 106:360度旋转展示flash+xml 下载 107:带翻页的JS图片切换效果 下载 108:JS三图横向平滑切换下载 109:四屏切换JS广告代码下载 110:JavaScript图片切换效果 下载 111:在线客服代码 ...