js淡入淡出焦点图幻灯片效果代码分享


Posted in Javascript onSeptember 08, 2015

本文实例讲述了javascript淡入淡出焦点图幻灯片效果。分享给大家供大家参考。具体如下:
这是一款基于javascript实现的淡入淡出焦点图幻灯片效果代码,可以自定义标题,实现过程很简单。
运行效果图:-------------------查看效果 下载源码-------------------

js淡入淡出焦点图幻灯片效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js淡入淡出焦点图幻灯片效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数字淡入淡出效果焦点图</title>
</head>
<body>
<style>
ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}
ul#bcty365_nav li{float:left; display:inline; margin:10px;}
ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;}
ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微软雅黑";}
ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;}
</style> 
<div style="width:500px;height:300px;overflow:hidden;margin:30px auto;">
 <!-- 代码 开始 -->
 <script language='javascript'> 
 linkarr = new Array();
 picarr = new Array();
 textarr = new Array();
 var swf_width=500;
 var swf_height=300;
 //文字颜色|文字位置|文字背景颜色|文字背景透明度|按键文字颜色|按键默认颜色|按键当前颜色|自动播放时间|图片过渡效果|是否显示按钮|打开方式
 var configtg='0xffffff|0|0x3FA61F|5|0xffffff|0xC5DDBC|0x000033|2|3|1|_blank';
 var files = "";
 var links = "";
 var texts = "";
 //这里设置调用标记
 linkarr[1] = "https://3water.com";
 picarr[1] = "images/1.jpg";
 textarr[1] = "三水点靠木";
 linkarr[2] = "https://3water.com";
 picarr[2] = "images/2.jpg";
 textarr[2] = " 三水点靠木";
 linkarr[3] = "https://3water.com";
 picarr[3] = "images/3.jpg";
 textarr[3] = " 三水点靠木";
 linkarr[4] = "https://3water.com";
 picarr[4] = "images/4.jpg";
 textarr[4] = " 三水点靠木";
 
 
 for(i=1;i<picarr.length;i++){
 if(files=="") files = picarr[i];
 else files += "|"+picarr[i];
 }
 for(i=1;i<linkarr.length;i++){
 if(links=="") links = linkarr[i];
 else links += "|"+linkarr[i];
 }
 for(i=1;i<textarr.length;i++){
 if(texts=="") texts = textarr[i];
 else texts += "|"+textarr[i];
 }
 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="'+ swf_width +'" height="'+ swf_height +'">');
 document.write('<param name="movie" value="images/bcastr3.swf"><param name="quality" value="high">');
 document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
 document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');
 document.write('<embed src="images/bcastr3.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>'); 
 </script>
 <!-- 代码 结束 -->
 </div>
 <div style=" clear:both; width:700px; margin:0 auto; text-align:center; padding-top:10px;">
 <p></p>
</div>

</body>
</html>

以上就是为大家分享的js淡入淡出焦点图幻灯片效果代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 #Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 #Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 #Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 #Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 #Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 #Javascript
js图片轮播特效代码分享
Sep 07 #Javascript
You might like
linux命令之调试工具strace的深入分析
2013/06/03 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
JavaScript Canvas实现验证码
2020/08/02 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
如何更优雅地写python代码
2019/07/02 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
银行服务理念口号
2015/12/25 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android