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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 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
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
angular.bind使用心得
2015/10/26 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
django的ORM模型的实现原理
2019/03/04 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
2014年庆元旦活动方案
2014/02/15 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
出纳担保书范文
2014/04/02 职场文书
法制工作总结2015
2015/07/23 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android
instantclient客户端 连接oracle数据库
2022/04/26 Oracle