zoukankan      html  css  js  c++  java
  • 只有几句的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/
    作者网站:万家乐热水器维修

  • 相关阅读:
    Mysql
    JavaScript常用事件
    css
    HTML
    判断pc还是手机打开跳转到别的网页
    queue 队列
    兼容firstChild和firstElementChild
    总结各种width,height,top,left
    原生js提取非行间样式
    ie8 不支持media
  • 原文地址:https://www.cnblogs.com/guowei/p/2032049.html
Copyright © 2011-2022 走看看