想在同一网页使用多次该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;}
以下是代码: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;}
和js中的 var source="fade_focus" //焦点轮换图片容器的id名称也不行
<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>