只有几句的js图片切换特效赏析

//...
var imageTaber = {
  id: "HotNewsImage",
  sum: 4,
  currentTabId: 0,
  oldTabId: 0,
  imgs: ["Themes/56Fix_20110312/Images/B_1.jpg", "Themes/56Fix_20110312/Images/B_2.jpg", "Themes/56Fix_20110312/Images/B_3.jpg", "Themes/56Fix_20110312/Images/ygfcpic_11.gif"],
  tab: function(n, auto) {
    imageTaber.isAuto = auto;
    if (auto) {
      this.oldTabId = this.currentTabId == 0 ? this.sum: this.currentTabId - 1;
    } else {
      this.oldTabId = this.currentTabId;
      this.currentTabId = n;
    }
    document.getElementById("imageTaber_" + this.oldTabId).className = "";
    document.getElementById("imageTaber_" + n).className = "current";
    document.getElementById(this.id).src = this.imgs[n];
    //HotNewsImageContainer.filters[0].Apply();
    //HotNewsImageContainer.filters[0].Play();
  },
  isAuto: false,
  timer: null,
  autoTab: function() {
    if (imageTaber.isAuto) {
      if (imageTaber.currentTabId < imageTaber.sum) {
        imageTaber.currentTabId++;
      } else {
        imageTaber.currentTabId = 0;
      }
      imageTaber.tab(imageTaber.currentTabId, true);
    }
    if (imageTaber.timer == null) {
      imageTaber.timer = setInterval("imageTaber.autoTab()", 3000);
      imageTaber.isAuto = true;
    }
  },
  reAuto: function() {
    imageTaber.isAuto = true;
  }
}

可以实现自动切换与手动切换。

实例:http://www.56fix.com/
作者网站:万家乐热水器维修

原文地址:https://www.cnblogs.com/guowei/p/2032049.html