js渐隐渐现图片切换效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js渐隐渐现图片切换效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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{width:380px;height:504px;margin:0 auto;}
#focus div{position:absolute;width:380px;height:504px;overflow:hidden;}
#focus img{width: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|#|美女1号</div>
			<div name="focus_img" id="focus_2">images/sfw580.jpg|#|美女2号</div>
		</div>
		<script type="text/javascript" src="js/focus.js"></script>
	</div><!--focus end-->
</body>
</html>

JS代码(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();

附件:下载该文件资源,减少时间成本(增值服务)