search

Home  >  Article  >  Web Front-end  >  js fade in and fade out focus image slide effect code sharing_javascript skills

js fade in and fade out focus image slide effect code sharing_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:40:051548browse

The example in this article describes the javascript fade-in and fade-out focus image slide effect. Share it with everyone for your reference. The details are as follows:
This is a fade-in and fade-out focus image slide effect code based on javascript. The title can be customized and the implementation process is very simple.
Operation rendering: -------------------View the effect Download source code----------------- --

Tips: If the browser does not work properly, you can try switching the browsing mode.
The js fade in and fade out focus image slide effect code shared with you is as follows 

<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] = "http://www.jb51.net";
 picarr[1] = "images/1.jpg";
 textarr[1] = "脚本之家";
 linkarr[2] = "http://www.jb51.net";
 picarr[2] = "images/2.jpg";
 textarr[2] = " 脚本之家";
 linkarr[3] = "http://www.jb51.net";
 picarr[3] = "images/3.jpg";
 textarr[3] = " 脚本之家";
 linkarr[4] = "http://www.jb51.net";
 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>

The above is the js fade in and fade out focus image slide effect code shared with you. I hope you can like it and apply it in practice.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use impress.js to create slideshows_javascript tipsNext article：Use impress.js to create slideshows_javascript tips

Related articles

See more