1.前端页面布局
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js渐隐渐现图片切换效果</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* focus */ #focus{380px;height:504px;margin:0 auto;} #focus div{position:absolute;380px;height:504px;overflow:hidden;} #focus img{380px;height:504px;} #focus #focus_img{display:none;} </style> </head> <body> <div id="focus"> <div id="focus_bg"></div> <div id="focus_show"></div> <div id="focus_img"> <div name="focus_img" id="focus_1">images/asdfw580.jpg|http://sc.chinaz.com/|美女1号</div> <div name="focus_img" id="focus_2">images/sfw580.jpg|http://sc.chinaz.com/|美女2号</div> </div> <script type="text/javascript" src="js/focus.js"></script> </div><!--focus end--> </div> </body> </html>
2.focus.js内容
var focus_id = 1; var focus_time = 0; var focus_bg = ""; var focus_begin = true; var focus_interval; var focus_count; var focus_url = ""; var focus_title = "";
//判断浏览器 if(navigator.appName == "Microsoft Internet Explorer") { focus_count = document.getElementById("focus_img").childNodes.length; }else{ focus_count = document.getElementsByName("focus_img").length; } function func_focus() { if(focus_id > focus_count) focus_id = 1; if(!focus_begin) clearInterval(focus_interval); focus_interval = setInterval("focus_show(" + focus_id + ")",50); } function focus_show(id) { if(focus_time < 20 && focus_bg != "") { var v = 100 / 20; if(navigator.appName=="Microsoft Internet Explorer") { document.getElementById("focus_show").style.filter = "Alpha(Opacity=" + (v * focus_time) + ")"; }else{ document.getElementById("focus_show").style.opacity = v * focus_time / 100; } focus_time ++; }else if(focus_count > 0){ if(!focus_begin) { document.getElementById("focus_bg").innerHTML = "<img src='" + focus_bg + "' />"; focus_time = 0; clearInterval(focus_interval); } var val = document.getElementById("focus_" + focus_id).innerHTML; var arr = val.split("|"); if(navigator.appName=="Microsoft Internet Explorer") { document.getElementById("focus_show").style.filter = "Alpha(Opacity=0)"; }else{ document.getElementById("focus_show").style.opacity = 0; }
//获取指定元素输出 document.getElementById("focus_show").innerHTML = "<a href='" + focus_url + "' target='_blank' title='" + focus_title + "'><img src='" + arr[0] + "' /></a>"; focus_url = arr[1]; focus_title = arr[2]; if(focus_count > 1) focus_id ++;
//速度 if(!focus_begin) focus_interval = setInterval("func_focus()",3000); else focus_begin = false; focus_bg = arr[0]; } } func_focus();