如何修改该js图片轮换代码，才能在同网页重复使用多次

想在同一网页使用多次该js图片轮换代码，现在只能正常使用一个，如何修改能重复使用多个。
以下是代码：html代码 <SCRIPT src="js/NewManPic.js"></SCRIPT>
  <div id="newman">
  <div id="newman_head"><div id="vtitle">新人推介</div></div>
  <div id="newman_content">   
<div id="fade_focus">
    <div class="loading"><img src="/images/loading.gif" /></div>
    <ul>
<li><div id="newmanpic"><a href="/VideoHtml/371.html" target="_blank" title="名称一"><img src="/images/VideoIMG/201071616444684226.jpg" alt="名称一"width="200" height="200"></a></div></li><li><div id="newmanpic"><a href="/VideoHtml/465.html" target="_blank" title="名称二"><img src="/images/VideoIMG/201071414531673407.png" alt="名称二"width="200" height="200"></a></div></li><li><div id="newmanpic"><a href="/VideoHtml/467.html" target="_blank" title="名称三"><img src="/images/VideoIMG/2010714157659074.jpg" alt="名称三"width="200" height="200"></a></div></li></li>
    </ul>
</div>
</div>NewManPic.js文件//主函数
var s=function(){
var interv=4000; //切换间隔时间
var interv2=30; //切换速速
var opac1=50; //文字背景的透明度
var source="fade_focus" //焦点轮换图片容器的id名称
//获取对象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制图层透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦点按钮
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//渐隐
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//滚动文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.onload=s;CSS文件代码#newman_content .d1{
width:200px;
height:auto;
overflow:hidden;
background-color:#fff;
position:relative;
}
#newman_content .loading{width:200px;background-color:#eee;height:200px;text-align:center;padding-top: 60px;}
#newman_content .d2{
width:100%;
height:200px;
overflow:hidden;
background-color: #eee;
}
#newman_content .num_list{
position:absolute;
width:100%;
left:0px;
bottom:-1px;
font-size:14px;
height:25px;
overflow:hidden;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 8px;
padding-left: 0px;
text-align: center;
font-weight: bold;
text-decoration: none;
background-color: #FFFFFF;
}
#newman_content .num_list span{display:inline-block;height:10px;padding-left:6px;}
#newman_content img{border:0px;}
#newman_content ul{display:none;}
#newman_content .button{position:absolute;z-index:1000;right:0px;bottom:2px;font-size:12px;font-weight:normal;font-family:Arial, Helvetica, sans-serif;}
#newman_content .b1,.b2{display:block;float:left;margin-right:3px;text-decoration:none;cursor:pointer;color: #ccc;font-size: 1px;}
#newman_content .b2{display: block;margin-left: 3px;}

解决方案 »

  1.   

    尝试过在html修改 <div id="fade_focus">
    和js中的  var source="fade_focus" //焦点轮换图片容器的id名称也不行
      

  2.   

    <!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 runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>测试页面</title>    <script type="text/javascript">
            //主函数
            var s = function(containerID) {
                var interv = 4000; //切换间隔时间
                var interv2 = 30; //切换速速
                var opac1 = 50; //文字背景的透明度
                var source = containerID; //"fade_focus" //焦点轮换图片容器的id名称
                //获取对象
                function getTag(tag, obj) { if (obj == null) { return document.getElementsByTagName(tag) } else { return obj.getElementsByTagName(tag) } }
                function getid(id) { return document.getElementById(id) };
                var opac = 0, j = 0, t = 63, num, scton = 0, timer, timer2, timer3; var id = getid(source); id.removeChild(getTag("div", id)[0]); var li = getTag("li", id); var div = document.createElement("div"); var title = document.createElement("div"); var span = document.createElement("span"); var button = document.createElement("div"); button.className = "button"; for (var i = 0; i < li.length; i++) { var a = document.createElement("a"); a.innerHTML = i + 1; a.onclick = function() { clearTimeout(timer); clearTimeout(timer2); clearTimeout(timer3); j = parseInt(this.innerHTML) - 1; scton = 0; t = 63; opac = 0; fadeon(); }; a.className = "b1"; a.onmouseover = function() { this.className = "b2" }; a.onmouseout = function() { this.className = "b1"; sc(j) }; button.appendChild(a); }
                //控制图层透明度
                function alpha(obj, n) { if (document.all) { obj.style.filter = "alpha(opacity=" + n + ")"; } else { obj.style.opacity = (n / 100); } }
                //控制焦点按钮
                function sc(n) { for (var i = 0; i < li.length; i++) { button.childNodes[i].className = "b1" }; button.childNodes[n].className = "b2"; }
                title.className = "num_list"; title.appendChild(span); alpha(title, opac1); id.className = "d1"; div.className = "d2"; id.appendChild(div); id.appendChild(title); id.appendChild(button);
                //渐显
                var fadeon = function() { opac += 5; div.innerHTML = li[j].innerHTML; span.innerHTML = getTag("img", li[j])[0].alt; alpha(div, opac); if (scton == 0) { sc(j); num = -2; scrolltxt(); scton = 1 }; if (opac < 100) { timer = setTimeout(fadeon, interv2) } else { timer2 = setTimeout(fadeout, interv); }; }
                //渐隐
                var fadeout = function() { opac -= 5; div.innerHTML = li[j].innerHTML; alpha(div, opac); if (scton == 0) { num = 2; scrolltxt(); scton = 1 }; if (opac > 0) { timer = setTimeout(fadeout, interv2) } else { if (j < li.length - 1) { j++ } else { j = 0 }; fadeon() }; }
                //滚动文字
                var scrolltxt = function() { t += num; span.style.marginTop = t + "px"; if (num < 0 && t > 3) { timer3 = setTimeout(scrolltxt, interv2) } else if (num > 0 && t < 62) { timer3 = setTimeout(scrolltxt, interv2) } else { scton = 0 } };
                fadeon();
            }
            //初始化
            window.onload = function() {
                var s1 = s("fade_focus");
                var s2 = s("fade_focus1");
            };
        </script>    <style type="text/css">
            #newman_content .d1
            {
                width: 200px;
                height: auto;
                overflow: hidden;
                background-color: #fff;
                position: relative;
            }
            #newman_content .loading
            {
                width: 200px;
                background-color: #eee;
                height: 200px;
                text-align: center;
                padding-top: 60px;
            }
            #newman_content .d2
            {
                width: 100%;
                height: 200px;
                overflow: hidden;
                background-color: #eee;
            }
            #newman_content .num_list
            {
                position: absolute;
                width: 100%;
                left: 0px;
                bottom: -1px;
                font-size: 14px;
                height: 25px;
                overflow: hidden;
                padding-top: 0px;
                padding-right: 0px;
                padding-bottom: 8px;
                padding-left: 0px;
                text-align: center;
                font-weight: bold;
                text-decoration: none;
                background-color: #FFFFFF;
            }
            #newman_content .num_list span
            {
                display: inline-block;
                height: 10px;
                padding-left: 6px;
            }
            #newman_content img
            {
                border: 0px;
            }
            #newman_content ul
            {
                display: none;
            }
            #newman_content .button
            {
                position: absolute;
                z-index: 1000;
                right: 0px;
                bottom: 2px;
                font-size: 12px;
                font-weight: normal;
                font-family: Arial, Helvetica, sans-serif;
            }
            #newman_content .b1, .b2
            {
                display: block;
                float: left;
                margin-right: 3px;
                text-decoration: none;
                cursor: pointer;
                color: #ccc;
                font-size: 1px;
            }
            #newman_content .b2
            {
                display: block;
                margin-left: 3px;
            }
        </style>
    </head>
    <body>
        <form id="form1" >
        <div id="newman">
            <div id="newman_head">
                <div id="vtitle">
                    新人推介</div>
            </div>
            <div id="newman_content">
                <div id="fade_focus">
                    <div class="loading">
                        <img src="/images/loading.gif" /></div>
                    <ul>
                        <li>
                            <div id="newmanpic">
                                <a href="/VideoHtml/371.html" target="_blank" title="名称一">
                                    <img src="/images/VideoIMG/201071616444684226.jpg" alt="名称一" width="200" height="200"></a></div>
                        </li>
                        <li>
                            <div id="newmanpic">
                                <a href="/VideoHtml/465.html" target="_blank" title="名称二">
                                    <img src="/images/VideoIMG/201071414531673407.png" alt="名称二" width="200" height="200"></a></div>
                        </li>
                        <li>
                            <div id="newmanpic">
                                <a href="/VideoHtml/467.html" target="_blank" title="名称三">
                                    <img src="/images/VideoIMG/2010714157659074.jpg" alt="名称三" width="200" height="200"></a></div>
                        </li>
                        </li>
                    </ul>
                </div>
                <div id="fade_focus1">
                    <div class="loading">
                        <img src="/images/loading.gif" /></div>
                    <ul>
                        <li>
                            <div id="Div2">
                                <a href="/VideoHtml/371.html" target="_blank" title="名称四">
                                    <img src="/images/VideoIMG/201071616444684226.jpg" alt="名称四" width="200" height="200"></a></div>
                        </li>
                        <li>
                            <div id="Div3">
                                <a href="/VideoHtml/465.html" target="_blank" title="名称五">
                                    <img src="/images/VideoIMG/201071414531673407.png" alt="名称五" width="200" height="200"></a></div>
                        </li>
                        <li>
                            <div id="Div4">
                                <a href="/VideoHtml/467.html" target="_blank" title="名称六">
                                    <img src="/images/VideoIMG/2010714157659074.jpg" alt="名称六" width="200" height="200"></a></div>
                        </li>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
    </body>
    </html>