大鸟,飞起来 发表于 2014-1-13 15:03:22

无按钮图片轮播切换


主文件cpfocus.htm<!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=gb2312" />
<title>无按钮图片切换</title>
<style type="text/css">
#cpfocus{width:380px;height:504px;margin:0 auto;}
#cpfocus div{position:absolute;width:380px;height:504px;overflow:hidden;}
#cpfocus img{width:380px;height:504px;}
#cpfocus #cpfocus_img{display:none;}
</style>
</head>
<body>
        <div id="cpfocus">
                <div id="cpfocus_bg"></div>
                <div id="cpfocus_show"></div>
                <div id="cpfocus_img">
                        <div name="cpfocus_img" id="cpfocus_1">plus/cpfocus/01.jpg|#|美女1号</div>
                        <div name="cpfocus_img" id="cpfocus_2">plus/cpfocus/02.jpg|#|美女2号</div>
                </div>
                <script type="text/javascript" src="plus/cpfocus/cpfocus.js"></script>
        </div><!--focus end-->
</body>
</html>基本文件cpfocus.jsvar cpfocus_id = 1;
var cpfocus_time = 0;
var cpfocus_bg = "";
var cpfocus_begin = true;
var cpfocus_interval;
var cpfocus_count;
var cpfocus_url = "";
var cpfocus_title = "";
if(navigator.appName == "Microsoft Internet Explorer")
{
        cpfocus_count = document.getElementById("cpfocus_img").childNodes.length;
}else{
        cpfocus_count = document.getElementsByName("cpfocus_img").length;
}
function func_cpfocus()
{
        if(cpfocus_id > cpfocus_count) cpfocus_id = 1;
        if(!cpfocus_begin) clearInterval(cpfocus_interval);
        cpfocus_interval = setInterval("cpfocus_show(" + cpfocus_id + ")",50);
}
function cpfocus_show(id)
{
        if(cpfocus_time < 20 && cpfocus_bg != "")
        {
                var v = 100 / 20;
                if(navigator.appName=="Microsoft Internet Explorer")
                {
                        document.getElementById("cpfocus_show").style.filter = "Alpha(Opacity=" + (v * cpfocus_time) + ")";
                }else{
                        document.getElementById("cpfocus_show").style.opacity = v * cpfocus_time / 100;
                }
                cpfocus_time ++;
        }else if(cpfocus_count > 0){
                if(!cpfocus_begin)
                {
                        document.getElementById("cpfocus_bg").innerHTML = "<img src='" + cpfocus_bg + "' />";
                        cpfocus_time = 0;
                        clearInterval(cpfocus_interval);
                }
                var val = document.getElementById("cpfocus_" + cpfocus_id).innerHTML;
                var arr = val.split("|");
                if(navigator.appName=="Microsoft Internet Explorer")
                {
                        document.getElementById("cpfocus_show").style.filter = "Alpha(Opacity=0)";
                }else{
                        document.getElementById("cpfocus_show").style.opacity = 0;
                }
                document.getElementById("cpfocus_show").innerHTML = "<a href='" + cpfocus_url + "' target='_blank' title='" + cpfocus_title + "'><img src='" + arr + "' /></a>";
                cpfocus_url = arr;
                cpfocus_title = arr;
                if(cpfocus_count > 1) cpfocus_id ++;
                if(!cpfocus_begin) cpfocus_interval = setInterval("func_cpfocus()",3000); else cpfocus_begin = false;
                cpfocus_bg = arr;
        }
}
func_cpfocus();
页: [1]
查看完整版本: 无按钮图片轮播切换