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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
js日期联动示例
May 02 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 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 彩色文字实现代码
2009/06/29 PHP
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python决策树分类算法学习
2017/12/22 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
24岁生日感言
2014/01/13 职场文书
党章学习思想汇报
2014/01/14 职场文书
推荐信模板
2014/05/09 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js