网站首页的轮播新闻flash效果实现

本来公司做的外网上有一个图片滚动新闻的效果，是用jQuery插件实现的，可是客户提要求，说是嫌效果只有一个，要么从上到下变换，要么从左到右的变换，因此改成了用flash实现的效果！。

效果图如下：

从网上看了好多代码，可是不太合适，后来从一个正在使用该效果的政府网站上拷贝了他的源码，想起之前公司也做过一个类似的效果，两者对比，修改后，终于正常运行。代码如下：

$(document).ready(function(){var pics = ""; //定义显示图片的变量，用于拼接图片使用var links = "";//链接的变量，拼接链接var texts = "";//文字变量，用户拼接文字描述var picarray = new Array();var linksarray = new Array();var textsarray = new Array();#foreach($img in $!{imgList})picarray.push("${R}$!{img.img}");linksarray.push("$!{root}/article/$!{img.id}/index/新闻/图片新闻");textsarray.push("$!{img.title}");#endpics= picarray.join("|");links = linksarray.join("|");texts = textsarray.join("|");var focus_width=300; //图片宽度var focus_height=243;//图片高度var text_height=43;//文字高度var swf_height = focus_height+text_height;//flash的高度=图片高度+文字高度var html = '<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="'+ focus_height +'">'+ '<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="${R}flash/playswf.swf"><param name="quality" value="high"><param name="bgcolor" value="#e3e3e3">'+ '<param name="menu" value="false"><param name=wmode value="opaque">'+ '<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">'+ '<embed src="${R}flash/playswf.swf" wmode="opaque" flashvars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">'+ '</object>';$("#KinSlideshow").html(html);});

原理就是，页面加载完成后，生成一段渲染flash的HTML代码，将其赋给页面的某个元素（KinSlideshow）。

渲染时候，图片的地址，显示文字，链接要有固定的格式，多条之间要用“|”分割开来。上述代码中，先是对后台来的数据进行遍历（velocity模板）。每次遍历时，将其放入到数组中。遍历完成后，使用js数组的join方法，添加一个“|”，这样要显示的数据就渲染好了。然后再在flash的源码中，按照规定的格式传入即可。

flash文件的位置：

<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="${R}flash/playswf.swf">
<embed src="${R}flash/playswf.swf"

这两个地方，是flash文件的地址，指向自己的flash文件即可。

例子下载。以后就不会忘记了。http://download.csdn.net/detail/lxl631/7058747

网站首页的轮播新闻flash效果实现相关推荐

首页轮转html代码,js制作网站首页图片轮播特效代码
本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下图片轮播 .warp{ width: 600px; height: 750px; position: re ...
javascript--爱奇艺网站首页（轮播图）
实现一个爱奇艺网站首页的轮播图: <!DOCTYPE html> <html lang="en"> <head><meta charset ...
js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
axure 图片切换图片的交互_Axure教程：首页图片轮播
图片轮播是各大网站常常见到的形式,文章带我们学习了如何用Axure实现图片轮播功能,一起来看看~ 双11刚过没多久,大家是否都参加了2000+亿的大项目呀?剁手的时候,有没有被各大电商平台的首页图片轮 ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
android 轮换实现动画,怎么在Android中实现一个首页无限轮播功能
怎么在Android中实现一个首页无限轮播功能发布时间:2021-04-12 16:22:49 来源:亿速云阅读:74 作者:Leah 这期内容当中小编将会给大家带来有关怎么在Android中实现 ...
CSS——网易云音乐首页之轮播图的实现（完整版）
文章目录前言一.结构的分析二.使用步骤 1.HTML结构 2.CSS样式总结前言本文主要介绍的是网易云音乐首页之轮播图的实现,细心的小伙伴会发现,之前有发过网易轮播图的制作方法,但并没有完 ...
html+css部分面试题（4）+拼多多商家入驻网页轮播图hover效果
目录 31:为什么要初始化样式? 32. BFC 是什么? 33.HTML 与 XHTML--二者有什么区别? 34.html 常见兼容性问题? 35.对 WEB 标准以及 W3C 的理解与认识补充 ...
游戏陪玩源码开发，仿某看书app首页Banner轮播+背景渐变
在游戏陪玩源码开发时,会设计到很多UI界面设计,其中首页Banner轮播就很重要,最近发现一个比较有意思的效果图,于是想自己操作实践下.效果图如下: 作者实现的效果: 1. 游戏陪玩源码开发,仿某看书 ...
会声会影如何制作图片轮播的视频效果
当需要进行图片展示时,常常使用图片轮播的形式进行展示,这种效果很常见并且展示效果好,该怎么制作呢?接下来,小编就教大家用视频编辑软件会声会影2020制作图片轮播的视频效果. 一. 制作单张图片滚动效果 ...

网站首页的轮播新闻flash效果实现

网站首页的轮播新闻flash效果实现相关推荐

最新文章

热门文章