再个图片 Javascript 仿Flash图片轮翻

来源:互联网 发布:德利迅达银川大数据 编辑:程序博客网 时间:2024/03/28 17:17
<style type="text/css">
 #album{    position:relative;    width:950px;    height:90px;    border:0px;    overflow:hidden;  }  #album dt {    margin:0;    padding:0;    width:950px;    height:90px;    overflow:hidden;  }  #album img {    border:0px;  }  #album dd {    position:absolute;    right:0px;    bottom:10px;  }  #album a {    display:block;    float:left;    margin-right:10px;    width:15px;    height:15px;    line-height:15px;    text-align:center;    text-decoration:none;    color:#808080;    background:transparent url(/images/o_button.gif) no-repeat -15px 0;  }  #album a:hover ,#album a.hover{    color:#F8F8F8;    background-position:0 0;  }</style><dl id="album">  <dt>    <img id="index1" src="http://www.rcles.com/data/attachment/forum/201205/17/234444nybk1ykdqgkykzm8.png  " />    <img id="index2" src="http://www.rcles.com/data/attachment/forum/201205/17/234445h2ad5fo30hwsh023.png " />  </dt>  <dd>    <a href="#index1">1</a><a href="#index2">2</a>  </dd></dl><script type="text/javascript">  function imageRotater(id){    var cases = "",    album = document.getElementById(id),    images = album.getElementsByTagName("img"),    links = album.getElementsByTagName("a"),    dt = album.getElementsByTagName("dt")[0],    length = images.length,    aIndex = 1,    aBefore = length;    for(var i=0;i< length;i++){      cases += images[i].id + ':"'+images[i].getAttribute("src")+'",'    }    images[0].style.cssText = "position:absolute;top:0;left:0;";//修正图片位置错误    var tip = document.createElement("dd");    tip.style.cssText = "position:absolute;bottom:0;height:20px;width:40px;padding:10px;color:#fff;background:#fff;";    album.insertBefore(tip,dt.nextSibling);    if(!+"\v1"){      tip.style.color = "#369";      tip.style.filter = "alpha(opacity=67)"    }else{      tip.style.cssText += "background: rgba(164, 173, 183, .65);"    }    cases = eval("({"+cases.replace(/,$/,"")+"})");    for(var i=0;i<length;i++){      links[i].onclick = function(e){        e =e || window.event;        var index = this.toString().split("#")[1];        aIndex = index.charAt(index.length-1);//☆☆☆☆        images[0].src = cases[index];        tip.innerHTML = images[aIndex -1].getAttribute("alt");          !+"\v1" ?(e.returnValue = false) :(e.preventDefault());      }    }    var prefix = images[0].id.substr(0,images[0].id.length -1);    (function(){      setTimeout(function(){        if(aIndex > length){          aIndex = 1;        }        images[0].src = cases[prefix+aIndex];        tip.innerHTML = images[aIndex -1].getAttribute("alt");        tip.style.bottom = "-40px";        links[aBefore-1].className = "";        links[aIndex-1].className = "hover";        aBefore = aIndex;        aIndex++;        move(tip);        setTimeout(arguments.callee,1500)      },1500)    })()    var move = function(el){      var begin = parseFloat(el.style.bottom),      speed = 1;      el.bottom = begin;      (function(){        setTimeout(function(){          el.style.bottom = el.bottom + speed + "px";          el.bottom += speed;          speed *= 1.5;//下一次移动的距离          if(el.bottom >= 0){            el.style.bottom = "0px";          }else{            setTimeout(arguments.callee,23);          }        },25)      })()    }  }  window.onload = function(){    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};    imageRotater("album");  }</script>


我网站www.rcles.com首页的两个图片做的flash,以前我一直用图片跑马灯,我网站是dz2的,这就造成了DIY设置的失效,而我用这个仿flash图片轮翻却可以实现。

原文:http://www.codefans.net/jscss/code/1652.shtml

原创粉丝点击