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 相关文章推荐
Bootstrap按钮组件详解
Apr 26 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python的多态性实例分析
2015/07/07 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
详解Django admin高级用法
2019/11/06 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
python中pivot()函数基础知识点
2021/01/03 Python
幼儿园实习生辞职信
2014/01/20 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
环保倡议书怎么写
2014/05/16 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
酒店端午节活动方案
2014/08/26 职场文书
2014国庆节标语口号
2014/09/19 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
道德模范事迹材料
2014/12/20 职场文书
研究生导师评语
2014/12/31 职场文书
个性发展自我评价2015
2015/03/09 职场文书
结婚堵门保证书
2015/05/08 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
React如何创建组件
2021/06/27 Javascript