想在同一页面插入二组这样的幻灯片图片广告，怎么实现？复制调用二次js图片有冲突

本帖最后由 kwdpx 于 2011-10-22 16:34:26 编辑

解决方案 »

  1.   

    冲突是因为你的两个div的ID重复造成的 你可以尝试用name去代替ID 这样就不会冲突了
      

  2.   


    但firefox浏览器只认id不认name吧，哪位高手直接给出代码，复制可用？谢谢！
      

  3.   


    firefox不认name？ 我可是第一次听说
    你用id肯定是不行的
    id重复是有冲突的
    name肯定是可用的
      

  4.   

    <!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">
    /*第一组*/
    #ibanner { position:relative; width:468px; height:60px; overflow:hidden; margin:20px 0 20px 0px; }
    #ibanner_pic {}
    #ibanner_pic a { position:absolute; top:0; display:block; width:468px; height:60px; 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 3px; background:#000; cursor:pointer; }
    #ibanner_btn .normal { height:14px; margin-top:8px; border:1px solid #999; color:#999; font-size:12px; line-height:14px; }
    #ibanner_btn .current { height:20px; border:1px solid #FF5300; color:#FF5300; font-size:16px; line-height:20px; }
    /*第二组*/
    #ibannerw { position:relative; width:468px; height:60px; overflow:hidden; margin:20px 0 80px 0px; }
    #ibanner_picw {}
    #ibanner_picw a { position:absolute; top:0; display:block; width:468px; height:60px; overflow:hidden; }
    #ibanner_btnw { position:absolute; z-index:9999; right:5px; bottom:5px; font-weight:700; font-family:Arial; }
    #ibanner_btnw span { display:block; float:left; margin-left:4px; padding:0 3px; background:#000; cursor:pointer; }
    #ibanner_btnw .normal { height:14px; margin-top:8px; border:1px solid #999; color:#999; font-size:12px; line-height:14px; }
    #ibanner_btnw .current { height:20px; border:1px solid #FF5300; color:#FF5300; font-size:16px; line-height:20px; }
    </style><script type="text/javascript">
    //第一组
    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};var btnList = $('ibanner_btn').getElementsByTagName('span');
    var picList = $('ibanner_pic').getElementsByTagName('a');
    if (picList.length==1) return;
    picList[0].style.zIndex='2';
    for (var m=0; m<btnList.length; m++){
    btnList[m].onmouseover = function() {
    for(var n=0; n<btnList.length; n++) {
    if (btnList[n].className == 'current') {
    var currentNum = n;
    }
    }
    classNormal();
    picZ();
    this.className='current';
    picList[currentNum].style.zIndex='2';
    var z = this.childNodes[0].nodeValue-1;
    picList[z].style.zIndex='3';
    if (currentNum!=z){
    picList[z].style.left='468px';
    moveElement('picLi_'+z,0,0,10);
    }
    }
    }
    }
    setInterval('autoBanner()', 2000);
    function autoBanner() {
    if(!$('ibanner')||!$('ibanner_pic')||!$('ibanner_btn')||autoKey) return;
    var btnList = $('ibanner_btn').getElementsByTagName('span');
    var picList = $('ibanner_pic').getElementsByTagName('a');
    if (picList.length==1) return;
    for(var i=0; i<btnList.length; i++) {
    if (btnList[i].className == 'current') {
    var currentNum = i;
    }
    }
    if (currentNum==(picList.length-1) ){
    classNormal();
    picZ();
    btnList[0].className='current';
    picList[currentNum].style.zIndex='2';
    picList[0].style.zIndex='3';
    picList[0].style.left='468px';
    moveElement('picLi_0',0,0,10);
    } else {
    classNormal();
    picZ();
    var nextNum = currentNum+1;
    btnList[nextNum].className='current';
    picList[currentNum].style.zIndex='2';
    picList[nextNum].style.zIndex='3';
    picList[nextNum].style.left='468px';
    moveElement('picLi_'+nextNum,0,0,10);
    }
    }
    addLoadEvent(addBtn);
    addLoadEvent(iBanner);
    //第二
      

  5.   

    组function $(id) { return document.getElementById(id); }
    function addLoadEventw(func){
    var oldonloadw = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function(){
    oldonloadw();
    func();
    }
    }
    }
    function addBtnw() {
    if(!$('ibannerw')||!$('ibanner_picw')) return;
    var picListw = $('ibanner_picw').getElementsByTagName('a');
    if(picListw.length==0) return;
    var btnBoxw = document.createElement('div');
    btnBoxw.setAttribute('id','ibanner_btnw');
    var SpanBoxw ='';
    for(var j=1; j<=picListw.length; j++ ) {
    var spanListw = '<span class="normal">'+j+'</span>';
    SpanBoxw += spanListw;
    }
    btnBoxw.innerHTML = SpanBoxw;
    $('ibannerw').appendChild(btnBoxw);
    $('ibanner_btnw').getElementsByTagName('span')[0].className = 'current';
    for (var m=0; m<picListw.length; m++){
    var attributeValue = 'picLi_'+m
    picListw[m].setAttribute('id',attributeValue);
    }
    }
    function moveElement(elementID,final_x,final_y,interval) {
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elemw = document.getElementById(elementID);
    if (elemw.movement) {
    clearTimeout(elemw.movement);
    }
    if (!elemw.style.left) {
    elemw.style.left = "0px";
    }
    if (!elemw.style.top) {
    elemw.style.top = "0px";
    }
    var xposw = parseInt(elemw.style.left);
    var yposw = parseInt(elemw.style.top);
    if (xposw == final_x && yposw == final_y) {
    moveing = false;
    return true;
    }
    if (xposw < final_x) {
    var dist = Math.ceil((final_x - xposw)/10);
    xposw = xposw + dist;
    }
    if (xposw > final_x) {
    var dist = Math.ceil((xposw - final_x)/10);
    xposw = xposw - dist;
    }
    if (yposw < final_y) {
    var dist = Math.ceil((final_y - yposw)/10);
    yposw = yposw + dist;
    }
    if (yposw > final_y) {
    var dist = Math.ceil((yposw - final_y)/10);
    yposw = yposw - dist;
    }
    elemw.style.left = xposw + "px";
    elemw.style.top = yposw + "px";
    var repeatw = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elemw.movement = setTimeout(repeatw,interval);
    }
    function classNormalw() {
    var btnListw = $('ibanner_btnw').getElementsByTagName('span');
    for (var j=0; j<btnListw.length; j++){
    btnListw[j].className='normal';
    }
    }
    function picZ() {
    var picListw = $('ibanner_picw').getElementsByTagName('a');
    for (var j=0; j<picListw.length; j++){
    picListw[j].style.zIndex='1';
    }
    }
    var autoKeyw = false;
    function iBannerw() {
    if(!$('ibannerw')||!$('ibanner_picw')||!$('ibanner_btnw')) return;
    $('ibannerw').onmouseover = function(){autoKeyw = true};
    $('ibannerw').onmouseout = function(){autoKeyw = false};var btnListw = $('ibanner_btnw').getElementsByTagName('span');
    var picListw = $('ibanner_picw').getElementsByTagName('a');
    if (picListw.length==1) return;
    picListw[0].style.zIndex='2';
    for (var m=0; m<btnListw.length; m++){
    btnListw[m].onmouseover = function() {
    for(var n=0; n<btnListw.length; n++) {
    if (btnListw[n].className == 'current') {
    var currentNumw = n;
    }
    }
    classNormalw();
    picZ();
    this.className='current';
    picListw[currentNumw].style.zIndex='2';
    var z = this.childNodes[0].nodeValue-1;
    picListw[z].style.zIndex='3';
    if (currentNumw!=z){
    picListw[z].style.left='468px';
    moveElement('picLi_'+z,0,0,10);
    }
    }
    }
    }
    setInterval('autoBannerw()', 1000);
    function autoBannerw() {
    if(!$('ibannerw')||!$('ibanner_picw')||!$('ibanner_btnw')||autoKeyw) return;
    var btnListw = $('ibanner_btnw').getElementsByTagName('span');
    var picListw = $('ibanner_picw').getElementsByTagName('a');
    if (picListw.length==1) return;
    for(var j=0; j<btnListw.length; j++) {
    if (btnListw[j].className == 'current') {
    var currentNumw = j;
    }
    }
    if (currentNumw==(picListw.length-1) ){
    classNormalw();
    picZ();
    btnListw[0].className='current';
    picListw[currentNumw].style.zIndex='2';
    picListw[0].style.zIndex='3';
    picListw[0].style.left='468px';
    moveElement('picLi_0',0,0,10);
    } else {
    classNormalw();
    picZ();
    var nextNumw = currentNumw+1;
    btnListw[nextNumw].className='current';
    picListw[currentNumw].style.zIndex='2';
    picListw[nextNumw].style.zIndex='3';
    picListw[nextNumw].style.left='468px';
    moveElement('picLi_'+nextNumw,0,0,10);
    }
    }
    addLoadEventw(addBtnw);
    addLoadEventw(iBannerw);</script>
    </head>
    <body>
    //第一组
    <div id="ibanner">
    <div id="ibanner_pic">
    <a href="/jscss/"><img src="http://www.codefans.net/jscss/demoimg/200904/a1.jpg" width="468" height="60" alt="" /></a>
    <a href="/sort/index.shtml"><img src="http://www.codefans.net/jscss/demoimg/200904/a2.jpg" width="468" height="60" alt="" /></a>
    <a href="/other/lastupdate.shtml"><img src="http://www.codefans.net/jscss/demoimg/200904/a3.jpg" width="468" height="60" alt="" /></a>
    <a href="/other/top100.shtml"><img src="http://www.codefans.net/jscss/demoimg/200904/a4.jpg" width="468" height="60" alt="" /></a>
    </div>
    </div>
    //第二组
    <div id="ibannerw">
    <div id="ibanner_picw">
    <a href="/jscss/"><img src="http://www.codefans.net/jscss/demoimg/200904/a1.jpg" width="468" height="60" alt="" /></a>
    <a href="/sort/index.shtml"><img src="http://www.codefans.net/jscss/demoimg/200904/a2.jpg" width="468" height="60" alt="" /></a>
    <a href="/other/lastupdate.shtml"><img src="http://www.codefans.net/jscss/demoimg/200904/a3.jpg" width="468" height="60" alt="" /></a>
    <a href="/other/top100.shtml"><img src="http://www.codefans.net/jscss/demoimg/200904/a4.jpg" width="468" height="60" alt="" /></a>
    </div>
    </div></body>
    </html>
      

  6.   

    以上用了最笨的办法，把js、css中所有参数都加了一个w然后就可以显示二组了，但第二组只播了一轮，第二轮就不显示图片了，只有1234在跳，请高手帮看一下问题出在哪？