js渐隐渐现图片切换效果

最新推荐文章于 2021-06-21 20:32:58 发布

weixin_30329623

最新推荐文章于 2021-06-21 20:32:58 发布

阅读量388

点赞数

文章标签：前端 xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wdd812674802/p/10429404.html

版权

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{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" 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();

转载于:https://www.cnblogs.com/wdd812674802/p/10429404.html

weixin_30329623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js渐隐渐现图片切换效果

1.前端页面布局<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js渐隐渐现图片切换效果</title>...
复制链接

扫一扫