<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script  language="javascript">function showa(){for(var i=0;i<3;i++){
if(i=0){
document.getElementById("Layer1").style.display="block";
document.getElementById("Layer2").style.display="none";
document.getElementById("Layer3").style.display="none";
}
if(i=1){
document.getElementById("Layer1").style.display="none";
document.getElementById("Layer2").style.display="block";
document.getElementById("Layer3").style.display="none";
}
if(i=2){
document.getElementById("Layer1").style.display="none";
document.getElementById("Layer2").style.display="none";
document.getElementById("Layer3").style.display="block";
}}setTimeout("showa()",1000);
}</script>
</head><body onLoad="showa()">
<div id="Layer1" style="position:absolute;
left:65px;
top:48px;
width:308px;
height:178px;
z-index:1; display:block" ><img src="zaoshang11/11.jpg" width="300" height="180"/></div>
<div id="Layer2" style="position:absolute;
left:65px;
top:48px;
width:308px;
height:178px;
z-index:1; display:none" ><img src="zaoshang11/2.jpg" width="300" height="180"/></div>
<div id="Layer3" style="position:absolute;
left:65px;
top:48px;
width:308px;
height:178px;
z-index:1; display:none" ><img src="zaoshang11/3.jpg" width="300" height="180"/></div>
</body>
</html>开始图片11.jpg显示,以后每隔1秒,图片2.jpg,图片3.jpg,图片11.jpg轮换显示。···但是我写的代码,没有这种效果。请大家教我下

解决方案 »

  1.   


    <script  language="javascript"> 
    var i=0;
    function showa(){ 
    i++;
    if(i==3) i=1;
    if(i=0){ 
    document.getElementById("Layer1").style.display="block"; 
    document.getElementById("Layer2").style.display="none"; 
    document.getElementById("Layer3").style.display="none"; 

    if(i=1){ 
    document.getElementById("Layer1").style.display="none"; 
    document.getElementById("Layer2").style.display="block"; 
    document.getElementById("Layer3").style.display="none"; 

    if(i=2){ 
    document.getElementById("Layer1").style.display="none"; 
    document.getElementById("Layer2").style.display="none"; 
    document.getElementById("Layer3").style.display="block"; 
    } setTimeout("showa()",1000); 
    } </script> 
      

  2.   

    谢谢了··我试了,还是没有实现···一下是我试的代码:
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script  language="javascript">
    var i=0;
    function showa(){
    i++;
    if(i==3)
    i=1;
    if(i=0){
    document.getElementById("Layer1").style.display="block";
    document.getElementById("Layer2").style.display="none";
    document.getElementById("Layer3").style.display="none";
    }
    if(i=1){
    document.getElementById("Layer1").style.display="none";
    document.getElementById("Layer2").style.display="block";
    document.getElementById("Layer3").style.display="none";
    }
    if(i=2){
    document.getElementById("Layer1").style.display="none";
    document.getElementById("Layer2").style.display="none";
    document.getElementById("Layer3").style.display="block";
    }setTimeout("showa()",1000);
    }</script>
    </head><body onLoad="showa()">
    <div id="Layer1" style="position:absolute;
    left:65px;
    top:48px;
    width:308px;
    height:178px;
    z-index:1; display:block" ><img src="zaoshang11/11.jpg" width="300" height="180"/></div>
    <div id="Layer2" style="position:absolute;
    left:65px;
    top:48px;
    width:308px;
    height:178px;
    z-index:1; display:none" ><img src="zaoshang11/2.jpg" width="300" height="180"/></div>
    <div id="Layer3" style="position:absolute;
    left:65px;
    top:48px;
    width:308px;
    height:178px;
    z-index:1; display:none" ><img src="zaoshang11/3.jpg" width="300" height="180"/></div>
    </body>
    </html>
      

  3.   

    判断用 == if(i==0){
                        document.getElementById("Layer1").style.display="block";
                        document.getElementById("Layer2").style.display="none";
                        document.getElementById("Layer3").style.display="none";
                    }
                    if(i==1){
                        document.getElementById("Layer1").style.display="none";
                        document.getElementById("Layer2").style.display="block";
                        document.getElementById("Layer3").style.display="none";
                    }
                    if(i==2){
                        document.getElementById("Layer1").style.display="none";
                        document.getElementById("Layer2").style.display="none";
                        document.getElementById("Layer3").style.display="block";
                    }
      

  4.   

    谢谢了··效果显示了··对了,我想知道。var i是个已经初始化的数字0,为什么还要在条件判读时间使用==呢?不能使用=吗?
      

  5.   

    图片自己找。代码比较长,一次性贴不上去。分两部分提交。
    <!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>
    <script language="javascript" >
    function g(o){return document.getElementById(o);}
    function HoverLi(n){
    for(var i=1;i<=2;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
    }
    function g(o){return document.getElementById(o);}
    function HoverLi1(n){
    for(var i=1;i<=2;i++){g('tb0_'+i).className='normaltab0';g('tbc0_0'+i).className='undis0';}g('tbc0_0'+n).className='dis0';g('tb0_'+n).className='hovertab0';
    }
    </script>
    </head>
    <body>
    <table width="960" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
    <td >
    <div class="subcont">
    <script type="text/javascript">
    ycn=window.ycnui||{};
    ycn.Common=new function(){this.lTrim=function(i){return i.replace(/^\s*/,"");};this.rTrim=function(i){return i.replace(/\s*$/,"");};this.trim=function(i){return this.rTrim(this.lTrim(i));};this.getEl=function(i){if(!document.getElementById)return false;if(typeof i==="string"){return document.getElementById(i);}else{return i;}};this.getElByClassName=function(t,n,s,el){var el=(el)?el:document;var itm=el.getElementsByTagName(t);var num=1;for(i=0;i<itm.length;i++){if(itm[i].className===n&&s===num){return itm[i];}else if(itm[i].className===n){num++;}}
    return false;};
    this.isIE6=function(){return navigator.userAgent.search('MSIE')>0&&navigator.userAgent.search('6')>0;}
    this.isIE=function(){return navigator.userAgent.search('MSIE')>0;}
    this.isOpera=function(){return navigator.userAgent.indexOf('Opera')>-1;}
    this.isMoz=function(){return navigator.userAgent.indexOf('Mozilla/5.')>-1;}
    this.setCookie=function(cn,cv,d,dm){var now=new Date();var expire=new Date();if(d==null||d==0)d=1;expire.setTime(now.getTime()+3600000*24*d);document.cookie=cn+"="+escape(cv)
    +";expires="+expire.toGMTString()
    +";domain="+dm;}
    this.deleteCookie=function(cn,dm){if(getCookie(name))
    {document.cookie=cn+"="+
    ((domain)?"; domain="+dm:"")+"; expires=Thu, 01-Jan-70 00:00:01 GMT";}}
    this.getCookie=function(cn)
    {var dc=document.cookie;var prefix=cn+"=";var begin=dc.indexOf("; "+prefix);if(begin==-1)
    {begin=dc.indexOf(prefix);if(begin!=0)return null;}
    else
    {begin+=2;}
    var end=document.cookie.indexOf(";",begin);if(end==-1)
    {end=dc.length;}
    return unescape(dc.substring(begin+prefix.length,end));}};
    ycn=window.ycn||{};ycn.Event={addEvent:function(obj,evType,fn){if(obj.addEventListener)
    {obj.addEventListener(evType,fn,false);return true;}
    else if(obj.attachEvent)
    {var r=obj.attachEvent("on"+evType,fn);ycn.EventCache.add(obj,evType,fn);return r;}
    else
    {return false;}},removeEvent:function(obj,evType,fn){if(obj.removeEventListener){obj.removeEventListener(evType,fn,false);return true;}else if(obj.detachEvent){var r=obj.detachEvent("on"+evType,fn);return r;}else{return false;}},getEvent:function(e)
    {e=window.event||e;e.leftButton=false;if(e.srcElement==null&&e.target!=null)
    {e.srcElement=e.target;e.leftButton=(e.button==1);}
    else if(e.target==null&&e.srcElement!=null)
    {e.target=e.srcElement;e.leftButton=(e.button==0);}
    else if(e.srcElement!=null&&e.target!=null)
    {}
    else{return null}
    if(document.body&&document.documentElement)
    {e.mouseX=e.pageX||(e.clientX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft));e.mouseY=e.pageY||(e.clientY+Math.max(document.body.scrollTop,document.documentElement.scrollTop));}
    else
    {e.mouseX=-1;e.mouseY=-1;}
    return e;},stopEvent:function(e)
    {if(e&&e.cancelBubble!=null)
    {e.cancelBubble=true;e.returnValue=false;}
    if(e&&e.stopPropagation&&e.preventDefault)
    {e.stopPropagation();e.preventDefault();}
    return false;}};ycn.EventCache=function()
    {var listEvents=[];return{listEvents:listEvents,add:function(node,sEventName,fHandler,bCapture){listEvents[listEvents.length]=arguments;},flush:function(){var i,item;for(i=listEvents.length-1;i>=0;i=i-1)
    {item=listEvents[i];if(item[0].removeEventListener){item[0].removeEventListener(item[1],item[2],item[3]);};if(item[1].substring(0,2)!="on"){item[1]="on"+item[1];};if(item[0].detachEvent){item[0].detachEvent(item[1],item[2]);};item[0][item[1]]=null;};}};}();ycn.Event.addEvent(window,"unload",ycn.EventCache.flush);function error_handler(a,b,c)
    {window.status=(c+"\n"+b+"\n\n"+a+"\n\n"+error_handler.caller);return true;}
    slidePlayer.prototype.container=null;slidePlayer.prototype.imageList=null;slidePlayer.prototype.width=0;slidePlayer.prototype.height=0;slidePlayer.prototype.currentNum=1;slidePlayer.prototype.playTimer=null;slidePlayer.prototype.loopTimer;slidePlayer.prototype.intervalTime=50;slidePlayer.prototype.waiting=2000;slidePlayer.prototype.isPause=false;slidePlayer.prototype.isPlaying=false;slidePlayer.prototype.endPlay=new Function;slidePlayer.prototype.initial=new Function;slidePlayer.prototype.getCurrnetNum=function(){return this.currentNum;};slidePlayer.prototype.goToPlay=function(n){var o=this;if(o.playTimer||o.playTimer!=null){window.clearInterval(o.playTimer);}
    if(o.loopTimer){window.clearTimeout(o.loopTimer);}
    var d;for(var i=0;i<o.imageList.length;i++){o.imageList[i].style.display="none";if(o.imageList[i].parentNode&&o.imageList[i].parentNode.tagName.toLowerCase()=='a'){d=o.imageList[i].parentNode;}else{d=o.imageList[i];}
    d.style.zIndex="1";d.style.filter="alpha(opacity=100)";d.style.MozOpacity=1;d.style.opacity=1;}
    o.isPlaying=false;o.imageList[o.currentNum-1].style.display="block";o.play(n);};slidePlayer.prototype.play=function(num){var o=this;if(o.isPlaying){return;}
    if(num){var nn=num;var on=o.currentNum;}else{var nn=o.currentNum+1;var on=o.currentNum;}
    if(nn>o.imageList.length){nn=1;}
    if(on==nn){o.loopTimer=window.setTimeout(function(){o.play();},o.waiting);return;}
    if(o.playTimer||o.playTimer!=null){window.clearInterval(o.playTimer);}
    if(o.loopTimer){window.clearTimeout(o.loopTimer);}
    var n_el=(o.imageList[nn-1].parentNode&&o.imageList[nn-1].parentNode.tagName.toLowerCase()=='a')?o.imageList[nn-1].parentNode:o.imageList[nn-1];var o_el=(o.imageList[on-1].parentNode&&o.imageList[on-1].parentNode.tagName.toLowerCase()=='a')?o.imageList[on-1].parentNode:o.imageList[on-1];n_el.style.zIndex=1;o_el.style.zIndex=10;o_el.style.filter="alpha(opacity=100)";o_el.style.MozOpacity=1;o_el.style.opacity=1;n_el.style.filter="alpha(opacity=100)";n_el.style.MozOpacity=1;n_el.style.opacity=1;o.imageList[nn-1].style.display="block";o.isPlaying=true;var n=100;var _is_start=false;var anim=function(){if(o.isPause){o_el.style.filter="alpha(opacity=100)";o_el.style.MozOpacity=1;o_el.style.opacity=1;return;}
    n-=20;_is_start=true;if(n<=0){o_el.style.filter="alpha(opacity=0)";o_el.style.MozOpacity=0;o_el.style.opacity=0;o_el.style.zIndex=1;o.imageList[on-1].style.display="none";o.isPlaying=false;o.currentNum=nn;o.loopTimer=window.setTimeout(function(){o.play();},o.waiting);window.clearInterval(o.playTimer);o.endPlay();}else{o_el.style.filter="alpha(opacity="+n+")";o_el.style.MozOpacity=n/100;o_el.style.opacity=n/100;}}
    o.playTimer=window.setInterval(anim,o.intervalTime);};function slidePlayer(con_id){var o=this;var cont=ycn.Common.getEl(con_id);if(!cont){return;}
    var imgs=cont.getElementsByTagName("img");if(!imgs||imgs.length<=0){return;}
    o.container=cont;o.imageList=imgs;var img=new Image();img.src=imgs[0].src;o.width=img.width;o.height=img.height;o.container.style.width=o.width+"px";o.container.style.height=o.height+"px";imgs[0].style.display="block";o.loopTimer=window.setTimeout(function(){o.play();},o.waiting);o.initial();}
     function is_support() { var iFrom = navigator.appVersion.indexOf("MSIE ");
     var ieVer = parseFloat(navigator.appVersion.substring(iFrom+5, iFrom+9));
     if(iFrom>0 && ieVer<5.5){
     return false; }
     else
     return true; }
     function init_slide(){
     if(!document.getElementById('slide-imgs')) return;
     var obj = new slidePlayer('slide-imgs'),slidenum,t_num,li;
     obj.waiting = 2000;
     if(obj && ycn.Common.getElByClassName('div','slide_addone',1)){
     ycn.Common.getEl('slideContent').innerHTML = ycn.Common.getElByClassName('div','slide_addone',1).innerHTML;
     }
     slidenum = ycn.Common.getEl('slidenum');
     if(obj && slidenum){
     t_num = "<ul class=\"slideNumber\"><li class=\"curSlideNumber\">1</li>";
     for(var i=1;i<obj.imageList.length; i++){
     t_num +="<li>"+(i+1)+"</li>";
     }
     t_num += "</ul>"
     slidenum.innerHTML = t_num;
     li = slidenum.getElementsByTagName("li");
     for(var j=0; j<li.length;j++){
     ycn.Event.addEvent(li[j],'click',function(e){
     obj.isPause = false;
     var el = (navigator.userAgent.toLowerCase().indexOf('msie')>0)? e.srcElement : this;
     for(var i=0; i<li.length;i++){
     li[i].className = '';
     }
     el.className = "curSlideNumber";
     obj.goToPlay(parseInt(el.innerHTML));
     });
     }
     }
      

  6.   

    接着上面的!obj.endPlay = function(){
     var cnum = obj.getCurrnetNum();
     var con = ycn.Common.getEl('slide_content_'+cnum),tit,mlnk,rlnk,desc;
     if(is_support()&&con){
     if((tit = ycn.Common.getElByClassName("div","slide_tit",1,con))){ycn.Common.getEl('slide_tit').innerHTML = tit.innerHTML;}
     if((mlnk = ycn.Common.getElByClassName("div","slide_more",1,con))){ycn.Common.getEl('slide_more').innerHTML = mlnk.innerHTML;}
     if((rlnk = ycn.Common.getElByClassName("div","slide_rellink",1,con))){ycn.Common.getEl('slide_rellink').innerHTML = rlnk.innerHTML;}
     if((desc = ycn.Common.getElByClassName("div","slide_desc",1,con))){ycn.Common.getEl('slide_desc').innerHTML = desc.innerHTML;}
     }
     if(li){
     for(var i=0; i<li.length;i++){
     li[i].className = '';
     }
     li[obj.getCurrnetNum()-1].className = 'curSlideNumber';
     }
     }
     ycn.Event.addEvent(obj.container,'mouseover',function(){obj.isPause = true;});
     ycn.Event.addEvent(obj.container,'mouseout',function(){obj.isPause = false;});
     obj.isPause = true;
     var begin_t = window.setTimeout(function(){window.clearTimeout(begin_t);obj.isPause=false;},obj.waiting);
     }
     if(is_support()) ycn.Event.addEvent(window,"load",init_slide);
     try {
     document.execCommand('BackgroundImageCache', false, true);
     } catch(e) {}
     </script>
     
    <style>
    #slidesshow {
    BORDER-RIGHT: #2b2b2b 1px solid; BORDER-TOP: #2b2b2b 1px solid; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #2b2b2b 1px solid; WIDTH: 300px; BORDER-BOTTOM: #2b2b2b 1px solid; HEIGHT: 154px;
    }
    #ss-mod {
    MARGIN: 0px; OVERFLOW: hidden; WIDTH: 300px; POSITION: relative; HEIGHT: 154px;
    }
    .slidenum {
    HEIGHT: 20px; BACKGROUND-COLOR: #c8e5f7
    }
    #slidenum {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 30; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: absolute; TOP: 142px; HEIGHT: 13px
    }
    .slideNumber {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 300px; LINE-HEIGHT: 13px; PADDING-TOP: 0px; HEIGHT: 13px; 
    }
    .slideNumber LI {
    DISPLAY: inline; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: url('images/litopbg.gif') repeat-x left center; FLOAT: left; MARGIN: 0px 0px; OVERFLOW: hidden; WIDTH: 28px; CURSOR: hand; COLOR: #fff; LINE-HEIGHT: 13px; FONT-FAMILY: arial; HEIGHT: 13px; TEXT-ALIGN: center;
    }
    .slideNumber LI.curSlideNumber {
    BACKGROUND: url('images/litopbgc.gif') repeat-x left center; COLOR: #000
    }
    .slidecontainer {
    POSITION: relative; HEIGHT: 225px
    }
    .slideimages {
    FLOAT: left; WIDTH: 300px; HEIGHT: 225px
    }
    .slideimages IMG {
    BORDER-TOP-WIDTH: 0px; DISPLAY: none; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 154px; BORDER-RIGHT-WIDTH: 0px
    }
    .slideimages A {
    BORDER-RIGHT: #324251 1px solid; BORDER-TOP: #324251 1px solid; LEFT: 0px; BORDER-LEFT: #324251 1px solid; BORDER-BOTTOM: #324251 1px solid; POSITION: absolute; TOP: 0px;
    }
    #slide_desc {
    FONT-WEIGHT: bold; Z-INDEX: 30; LEFT: 1px; OVERFLOW: hidden; WIDTH: 300px; COLOR: #ffffff; TEXT-INDENT: 10px; LINE-HEIGHT: 24px; WHITE-SPACE: nowrap; POSITION: absolute; TOP: 1px; HEIGHT: 24px; text-align:right; 
    }
    #slide_desc_bg {
    Z-INDEX: 29; BACKGROUND: #000000; FILTER: alpha(opacity=50); LEFT: 0px; WIDTH: 300px; LINE-HEIGHT: 24px; POSITION: absolute; TOP: 0px; HEIGHT: 24px; opacity: .8
    }
    #slide_desc P {
    PADDING-RIGHT: 10px
    }
    </style>
    <div id="slidesshow">
    <!--start:幻灯-->
    <div id="ss-mod">
     <!--图-->
     <div id="slide-imgs" class="slidecontainer">
     <div class="slideimages">
     <a href="#" target="_blank">
    <img src="images/flash1.gif" /></a>
     <a href="#" target="_blank">
    <img src="images/flash.gif" /></a>
     <a href="#" target="_blank">
    <img src="images/flash3.gif" /></a>
     <a href="#" target="_blank">
    <img src="images/flash.gif" /></a>
     </div>
     </div>
     <div id="slidenum"></div>
     <!--end:图-->
     <div id="slide_desc"></div>
     <div id="slide_desc_bg"></div>
     <!--{{start:说明 -->
     <div id="slide_content_1" style="display:none">
     <div class="slide_desc">
     微软时钟界面设计&nbsp;
     </div>
     </div>
     <div id="slide_content_2" style="display:none">
     <div class="slide_desc">
     彩色个性的头发&nbsp;
     </div>
     </div>
      <div id="slide_content_3" style="display:none">
     <div class="slide_desc">
     微软时钟界面设计&nbsp;
     </div>
     </div>
     <div id="slide_content_4" style="display:none">
     <div class="slide_desc">
     彩色个性的头发UI设计&nbsp;
     </div>
     </div>
     </div> <!--}}end:说明 -->
     <!--{{start:slide js -->
     <script>
     function load_ys_slide(){
     var con = ycn.Common.getEl('slide_content_1'),tit,mlnk,rlnk,desc;
     if(con){
     if(is_support())
     if((desc = ycn.Common.getElByClassName("div","slide_desc",1,con))){ycn.Common.getEl('slide_desc').innerHTML = desc.innerHTML;}
     }
     }
     load_ys_slide();
     </script>
    </div>
     </div>
    </td>
      </tr>
    </table>
    </body>
    </html>