找了2两段代码,求js高手给合并一下,我自己合并完,弹出窗口只显示第一张图片,不能切换了。谢谢!很着急啊,自己不会编程。
右下角弹出窗口代码:
<SCRIPT Language=Javascript>
图片轮播代码:
<style type="text/css">
- { margin:0; padding:0; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html { overflow:-moz-scrollbars-vertical; }
#ibanner { position:relative; width:522px; height:255px; overflow:hidden; margin:0px 0 0px 0px;} //内容图片属性
#ibanner_pic {}
#ibanner_pic a { position:absolute; top:0; display:block; width:522px; height:250px; overflow:hidden; }
#ibanner_btn { position:absolute; z-index:9999; right:5px; bottom:5px; font-weight:700; font-family:Arial; }
#ibanner_btn span { display:block; float:left; margin-left:4px; padding:0 5px; background:#000; cursor:pointer; }
#ibanner_btn .normal { height:20px; margin-top:8px; border:1px solid #999; color:#999; font-size:16px; line-height:20px; }
#ibanner_btn .current { height:28px; border:1px solid #FF5300; color:#FF5300; font-size:28px; line-height:28px; }
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
function addBtn() {
if(!$('ibanner')||!$('ibanner_pic')) return;
var picList = $('ibanner_pic').getElementsByTagName('a');
if(picList.length==0) return;
var btnBox = document.createElement('div');
btnBox.setAttribute('id','ibanner_btn');
var SpanBox ='';
for(var i=1; i<=picList.length; i++ ) {
var spanList = '<span class="normal">'+i+'</span>';
SpanBox += spanList;
}
btnBox.innerHTML = SpanBox;
$('ibanner').appendChild(btnBox);
$('ibanner_btn').getElementsByTagName('span')[0].className = 'current';
for (var m=0; m<picList.length; m++){
var attributeValue = 'picLi_'+m
picList[m].setAttribute('id',attributeValue);
}
}
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
moveing = false;
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function classNormal() {
var btnList = $('ibanner_btn').getElementsByTagName('span');
for (var i=0; i<btnList.length; i++){
btnList[i].className='normal';
}
}
function picZ() {
var picList = $('ibanner_pic').getElementsByTagName('a');
for (var i=0; i<picList.length; i++){
picList[i].style.zIndex='1';
}
}
var autoKey = false;
function iBanner() {
if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')) return;
$('ibanner').onmouseover = function(){autoKey = true};
$('ibanner').onmouseout = function(){autoKey = false};</li>
</ul>
<p>var btnList = $('ibanner_btn').getElementsByTagName('span');<br>
var picList = $('ibanner_pic').getElementsByTagName('a');<br>
if (picList.length==1) return;<br>
picList[0].style.zIndex='2';<br>
for (var m=0; m<btnList.length; m++){<br>
btnList[m].onmouseover = function() {<br>
for(var n=0; n<btnList.length; n++) {<br>
if (btnList[n].className == 'current') {<br>
var currentNum = n;<br>
}<br>
}<br>
classNormal();<br>
picZ();<br>
this.className='current';<br>
picList[currentNum].style.zIndex='2';<br>
var z = this.childNodes[0].nodeValue-1;<br>
picList[z].style.zIndex='3';<br>
if (currentNum!=z){<br>
picList[z].style.left='650px';<br>
moveElement('picLi_'+z,0,0,10);<br>
}<br>
}<br>
}<br>
}<br>
setInterval('autoBanner()', 5000);<br>
function autoBanner() {<br>
if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return;<br>
var btnList = $('ibanner_btn').getElementsByTagName('span');<br>
var picList = $('ibanner_pic').getElementsByTagName('a');<br>
if (picList.length==1) return;<br>
for(var i=0; i<btnList.length; i++) {<br>
if (btnList[i].className == 'current') {<br>
var currentNum = i;<br>
}<br>
}<br>
if (currentNum==(picList.length-1) ){<br>
classNormal();<br>
picZ();<br>
btnList[0].className='current';<br>
picList[currentNum].style.zIndex='2';<br>
picList[0].style.zIndex='3';<br>
picList[0].style.left='650px';<br>
moveElement('picLi_0',0,0,10);<br>
} else {<br>
classNormal();<br>
picZ();<br>
var nextNum = currentNum+1;<br>
btnList[nextNum].className='current';<br>
picList[currentNum].style.zIndex='2';<br>
picList[nextNum].style.zIndex='3';<br>
picList[nextNum].style.left='650px';<br>
moveElement('picLi_'+nextNum,0,0,10);<br>
}<br>
}<br>
addLoadEvent(addBtn);<br>
addLoadEvent(iBanner);<br>
我自己合并后的弹出轮播图片代码:
<style type="text/css">
- { margin:0; padding:0; } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#0287CA; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } legend { display:none; } em, strong, cite, th { font-style:normal; font-weight:normal; } input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; } table { border-collapse:collapse; } html { overflow:-moz-scrollbars-vertical; } #ibanner { position:relative; width:522px; height:255px; overflow:hidden; margin:0px 0 0px 0px;} //内容图片属性 #ibanner_pic {} #ibanner_pic a { position:absolute; top:0; display:block; width:522px; height:250px; overflow:hidden; } #ibanner_btn { position:absolute; z-index:9999; right:5px; bottom:5px; font-weight:700; font-family:Arial; } #ibanner_btn span { display:block; float:left; margin-left:4px; padding:0 5px; background:#000; cursor:pointer; } #ibanner_btn .normal { height:20px; margin-top:8px; border:1px solid #999; color:#999; font-size:16px; line-height:20px; } #ibanner_btn .current { height:28px; border:1px solid #FF5300; color:#FF5300; font-size:28px; line-height:28px; } function $(id) { return document.getElementById(id); } function addLoadEvent(func){ var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function(){ oldonload(); func(); } } } function addBtn() { if(!$('ibanner')||!$('ibanner_pic')) return; var picList = $('ibanner_pic').getElementsByTagName('a'); if(picList.length==0) return; var btnBox = document.createElement('div'); btnBox.setAttribute('id','ibanner_btn'); var SpanBox =''; for(var i=1; i<=picList.length; i++ ) { var spanList = '<span class="normal">'+i+'</span>'; SpanBox += spanList; } btnBox.innerHTML = SpanBox; $('ibanner').appendChild(btnBox); $('ibanner_btn').getElementsByTagName('span')[0].className = 'current'; for (var m=0; m<picList.length; m++){ var attributeValue = 'picLi_'+m picList[m].setAttribute('id',attributeValue); } } function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = "0px"; } if (!elem.style.top) { elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { moveing = false; return true; } if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); } function classNormal() { var btnList = $('ibanner_btn').getElementsByTagName('span'); for (var i=0; i<btnList.length; i++){ btnList[i].className='normal'; } } function picZ() { var picList = $('ibanner_pic').getElementsByTagName('a'); for (var i=0; i<picList.length; i++){ picList[i].style.zIndex='1'; } } var autoKey = false; function iBanner() { if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')) return; $('ibanner').onmouseover = function(){autoKey = true}; $('ibanner').onmouseout = function(){autoKey = false};</li> </ul> <p>var btnList = $('ibanner_btn').getElementsByTagName('span');<br> var picList = $('ibanner_pic').getElementsByTagName('a');<br> if (picList.length==1) return;<br> picList[0].style.zIndex='2';<br> for (var m=0; m<btnList.length; m++){<br> btnList[m].onmouseover = function() {<br> for(var n=0; n<btnList.length; n++) {<br> if (btnList[n].className == 'current') {<br> var currentNum = n;<br> }<br> }<br> classNormal();<br> picZ();<br> this.className='current';<br> picList[currentNum].style.zIndex='2';<br> var z = this.childNodes[0].nodeValue-1;<br> picList[z].style.zIndex='3';<br> if (currentNum!=z){<br> picList[z].style.left='650px';<br> moveElement('picLi_'+z,0,0,10);<br> }<br> }<br> }<br> }<br> setInterval('autoBanner()', 5000);<br> function autoBanner() {<br> if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return;<br> var btnList = $('ibanner_btn').getElementsByTagName('span');<br> var picList = $('ibanner_pic').getElementsByTagName('a');<br> if (picList.length==1) return;<br> for(var i=0; i<btnList.length; i++) {<br> if (btnList[i].className == 'current') {<br> var currentNum = i;<br> }<br> }<br> if (currentNum==(picList.length-1) ){<br> classNormal();<br> picZ();<br> btnList[0].className='current';<br> picList[currentNum].style.zIndex='2';<br> picList[0].style.zIndex='3';<br> picList[0].style.left='650px';<br> moveElement('picLi_0',0,0,10);<br> } else {<br> classNormal();<br> picZ();<br> var nextNum = currentNum+1;<br> btnList[nextNum].className='current';<br> picList[currentNum].style.zIndex='2';<br> picList[nextNum].style.zIndex='3';<br> picList[nextNum].style.left='650px';<br> moveElement('picLi_'+nextNum,0,0,10);<br> }<br> }<br> addLoadEvent(addBtn);<br> addLoadEvent(iBanner);<br> <!-- var oPopup = window.createPopup(); oPopup.document.body.onclick=popClick; function popClick(){ window.open(''); } var popTop=40; function popmsg(msgstr){ ""; var winstr="<table width=\"216\" height=\"280\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"; winstr+="<tr><td align=\"center\"><table width=\"90%\" height=\"280\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"; winstr+="<tr><td valign=\"top\" style=\"font-size:12px;\"><div id=\"ibanner\"><div id=\"ibanner_pic\">"+msgstr+"</div></div></td></tr></table></td></tr></table>"; oPopup.document.body.innerHTML = winstr; popshow(); } function popshow(){ window.status=popTop; if(popTop>1720){ clearTimeout(mytime); oPopup.hide(); return; }else if(popTop<260){ oPopup.show(screen.width-208,screen.height,208,popTop); }else if(popTop<260){ oPopup.show(screen.width-208,screen.height-popTop,208,160); } if(popTop<1750){ popTop+=10; if(popTop>260){ oPopup.show(screen.width-208,screen.height,208,262); } }else{ } var mytime=setTimeout("popshow();",100); } popmsg("<a href=\"#\"><img alt=\"\" border=\"0\" src=\"D:/1.jpg\" /></a> <a href=\"#\"><img alt=\"\" src=\"D:/2.jpg\" border=\"0\" /></a> <a href=\"#\"><img alt=\"\" src=\"D:/3.jpg\" border=\"0\"/></a>"); -->