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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python列表的增删改查实例代码
2018/01/30 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
python从Oracle读取数据生成图表
2020/10/14 Python
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
学生会竞选演讲稿学习部
2014/08/25 职场文书
重阳节标语大全
2014/10/07 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
2014年就业工作总结
2014/11/26 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
公司年会主持词范文!
2019/05/07 职场文书