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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
JavaScript的继承实现小结
May 07 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
el-form 多层级表单的实现示例
Sep 10 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开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python3几个常见问题的处理方法
2019/02/26 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
就职演讲稿范文
2014/05/19 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
四十九个javascript小知识实用技巧
2021/11/20 Javascript