<!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|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">
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();
</script>
</div><!--focus end-->
</body>
</html>
1 回答
汉娜之眼
TA贡献42条经验 获得超27个赞
这个使用定时器实现的，跟你说一下思路吧，你给的代码感觉比较麻烦。
定义div设置导入img并定好id
编写js代码，定义函数为img透明度增减
设置定时器循环调用js的透明度变化函数
这样就实现了图片渐隐渐现，其实就是定时器循环改变透明度而已。
添加回答
举报
0/150
提交
取消