Javascript 仿Flash图片轮翻_建站学-个人建站指南,网页制作,网站设计,网站制作教程

Javascript 仿Flash平滑效果的图片轮翻，完全用JavaScript代码实现，图片轮番间隔、按钮每次移动的距离以及图片显示框的大小都可以再次定义，以适应你的网页需要。
以下是代码片段：

    <title>javascript图片轮换</title>
    <style type="text/css">
      #album{
        position:relative;
        width:400px;
        height:300px;
        border:10px solid #EFEFDA;
        overflow:hidden;
      }
      #album dt {
        margin:0;
        padding:0;
        width:400px;
        height:300px;
        overflow:hidden;
      }
      #album img {
        border:2px solid #000;
      }
      #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(/jscss/demoimg/200910/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" alt=余秋的黄昏" src="/jscss/demoimg/wall3.jpg" />
        <img id="index2" alt="美丽欧洲" src="/jscss/demoimg/wall4.jpg" />
        <img id="index3" alt="巨石阵的神秘" src="/jscss/demoimg/wall5.jpg" />
      </dt>
      <dd>
        <a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</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:380px;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> (责任编辑：admin)

搜索

热门标签:

Javascript 仿Flash图片轮翻