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文件优化
Dec 08 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python常用函数详解
2016/09/13 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
个人工作主要事迹
2014/05/08 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
详解Python牛顿插值法
2021/05/11 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android