javascript图片轮换

先完成结构层与表现层部分,做一个纯CSS相册,好让JS不能动弹时,相册还能运作。过程见《纯CSS相册》,只不过是在它的基础再做了一些优化,更符合人的思路走向,好让下面JS顺产而已。

<dl id="album">
  <dt>
    <img id="index1" alt="月光下的花瓣" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" />
    <img id="index2" alt="清澈的湖水" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" />
    <img id="index3" alt="荒漠上的植物" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" />
    <img id="index4" alt="末日霓虹" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" />
    <img id="index5" alt="绿·生意" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" />
    <img id="index6" alt="又是收获的季节" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" />
  </dt>
  <dd>
    <a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a><a href="#index4">4</a><a href="#index5">5</a><a href="#index6">6</a>
  </dd>
</dl>

接着下来我们用javascript来修正原来的缺陷和增加一些CSS做不到的能力。主要思路如下:用一个定时不断修改第一个img元素的src属性,实现图片自动播放的功能。取消翻页栏的链接点击时的默认行为,取出当前链接的锚点,并把代入一个哈希对象。这个对象会返回一个图片链接,然后再把它代入到第一个图片的src,实现点时切换图片的功能。因此如何实现这个哈希对象比较关键,它的作用相当于一个switch-case代码块,键为锚点,值为图片链接。

function imageRotater(id){
  var cases = "",
  album = document.getElementById(id),
  images = album.getElementsByTagName("img"),
  links = album.getElementsByTagName("a"),
  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;";//修正图片的位置错误问题
  cases = eval("({"+cases.replace(/,$/,"")+"})"); //相当于switch-case代码块
  for(var i=0;i<length;i++){ //实现点击切换图片
    links[i].onclick = function(e){
      e =e || window.event;
      var index = this.toString().split("#")[1];
      aIndex = index.substr(-1);
      images[0].src = cases[index];
        !+"\v1" ?(e.returnValue = false) :(e.preventDefault());
    }
  }
  (function(){//实现自动轮换图片
    setTimeout(function(){
      if(aIndex > length){
        aIndex = 1;
      }
      images[0].src = cases["index"+aIndex];
      links[aBefore-1].className = "";
      links[aIndex-1].className = "hover";
      aBefore = aIndex;
      aIndex++;
      setTimeout(arguments.callee,1500)
    },1500)
  })()
}
window.onload = function(){
  try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
  imageRotater("album");
}

我们再增加一个信息栏,用来放置图片的alt值,并让它具有缓动效果。

  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,25);//每移动一次停留25毫秒
        }
      },25)
    })()
  }
}

至于信息栏,其实只是一个动态生成的dd元素,我们把它插入到第一个dd元素之前,让其绝对定位,就可以用move()函数来移动它了。这些都很基础就不写出来了,看最终效果:

我们可以看得出在IE与标准浏览器中,信息栏的样式差别比较大。这是因为标准浏览器支持rgba这种背景透明文字不透明的效果,IE的透明滤镜不支持。想做到相同的效果,IE就要增加多一个元素来装载文字,比较麻烦。有兴趣的朋友可以自己实现一下。

据反应,在运行框2与3中,在IE浏览器下存在问题。我试了一下,果真如此。这是相当隐秘的bug。这问题是当我们点击翻页栏的按钮时,并不会如愿地切换到相应的图片,而是按对象为空的错误。控制图片切换主要是靠如下两条语句:

images[0].src = cases[index];
//*******略***********
images[0].src = cases[prefix+aIndex];

而aIndex是由index计算出来的,经测试获取index的方式是没有问题,能正确获取锚点。

links[i].onclick = function(e){
       e =e || window.event;
       var index = this.toString().split("#")[1];
       alert(index);
       //*********略**********
}

因此报错的语句是计算aIndex的语句:

links[i].onclick = function(e){
       e =e || window.event;
       var index = this.toString().split("#")[1];
        aIndex = index.substr(-1);//★★罪魁祸首★★
       //*********略**********
}

查了一下,substr方法不符合ECMA标准,不赞成使用。估计问题就出在这里了。我们换成以下方式计算aIndex就没问题了。

links[i].onclick = function(e){
       e =e || window.event;
       var index = this.toString().split("#")[1];
       aIndex = index.charAt(index.length-1);//☆☆☆☆
       //*********略**********
}

原文地址:https://www.cnblogs.com/jcomet/p/1693549.html