コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jsはit_javascriptスキルをクリックして左右の画像カルーセルを実装します

WBOY
リリース： 2016-05-16 15:50:47
オリジナル
1328 人が閲覧しました

これは小さなフレームワークに相当し、すぐに使用できます:

1. 機能:

上の図に示すように: 左右の 2 つのボタンをクリックして画像を左右にスクロールするか、スクロールする秒数を自分で設定します。

2. まず、play.js という名前の js ファイルを作成します (HTML での導入と同じである限り): 

var sina = {
  $: function(objName) {
    if (document.getElementById) {
      return eval('document.getElementById("' + objName + '")')
    } else {
      return eval('document.all.' + objName)
    }
  },
  isIE: navigator.appVersion.indexOf("MSIE") != -1 ? true : false,
  addEvent: function(l, i, I) {
    if (l.attachEvent) {
      l.attachEvent("on" + i, I)
    } else {
      l.addEventListener(i, I, false)
    }
  },
  delEvent: function(l, i, I) {
    if (l.detachEvent) {
      l.detachEvent("on" + i, I)
    } else {
      l.removeEventListener(i, I, false)
    }
  },
  readCookie: function(O) {
    var o = "",
      l = O + "=";
    if (document.cookie.length > 0) {
      var i = document.cookie.indexOf(l);
      if (i != -1) {
        i += l.length;
        var I = document.cookie.indexOf(";", i);
        if (I == -1) I = document.cookie.length;
        o = unescape(document.cookie.substring(i, I))
      }
    };
    return o
  },
  writeCookie: function(i, l, o, c) {
    var O = "",
      I = "";
    if (o != null) {
      O = new Date((new Date).getTime() + o * 3600000);
      O = "; expires=" + O.toGMTString()
    };
    if (c != null) {
      I = ";domain=" + c
    };
    document.cookie = i + "=" + escape(l) + O + I
  },
  readStyle: function(I, l) {
    if (I.style[l]) {
      return I.style[l]
    } else if (I.rentStyle) {
      return I.currentStyle[l]
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
      var i = document.defaultView.getComputedStyle(I, null);
      return i.getPropertyValue(l)
    } else {
      return null
    }
  }
};

function ScrollPic(scrollContId, arrLeftId, arrRightId, dotListId) {
  this.scrollContId = scrollContId;
  this.arrLeftId = arrLeftId;
  this.arrRightId = arrRightId;
  this.dotListId = dotListId;
  this.dotClassName = "dotItem";
  this.dotOnClassName = "dotItemOn";
  this.dotObjArr = [];
  this.pageWidth = 0;
  this.frameWidth = 0;
  this.speed = 10;
  this.space = 10;
  this.pageIndex = 0;
  this.autoPlay = true;
  this.autoPlayTime = 5;
  var _autoTimeObj, _scrollTimeObj, _state = "ready";
  this.stripDiv = document.createElement("DIV");
  this.listDiv01 = document.createElement("DIV");
  this.listDiv02 = document.createElement("DIV");
  if (!ScrollPic.childs) {
    ScrollPic.childs = []
  };
  this.ID = ScrollPic.childs.length;
  ScrollPic.childs.push(this);
  this.initialize = function() {
    if (!this.scrollContId) {
      throw new Error("必须指定scrollContId.");
      return
    };
    this.scrollContDiv = sina.$(this.scrollContId);
    if (!this.scrollContDiv) {
      throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + this.scrollContId + "\")");
      return
    };

    this.scrollContDiv.style.width = this.frameWidth + "px";
    this.scrollContDiv.style.overflow = "hidden";
    this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;
    this.scrollContDiv.innerHTML = "";
    this.scrollContDiv.appendChild(this.stripDiv);
    this.stripDiv.appendChild(this.listDiv01);
    this.stripDiv.appendChild(this.listDiv02);
    this.stripDiv.style.overflow = "hidden";
    this.stripDiv.style.zoom = "1";
    this.stripDiv.style.width = "32766px";
    this.listDiv01.style.cssFloat = "left";
    this.listDiv02.style.cssFloat = "left";
    sina.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));
    sina.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));
    if (this.arrLeftId) {
      this.arrLeftObj = sina.$(this.arrLeftId);
      if (this.arrLeftObj) {
        sina.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()"));
        sina.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));
        sina.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))
      }
    };
    if (this.arrRightId) {
      this.arrRightObj = sina.$(this.arrRightId);
      if (this.arrRightObj) {
        sina.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()"));
        sina.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));
        sina.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))
      }
    };
    if (this.dotListId) {
      this.dotListObj = sina.$(this.dotListId);
      if (this.dotListObj) {
        var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4),
          i, tempObj;
        for (i = 0; i < pages; i++) {
          tempObj = document.createElement("span");
          this.dotListObj.appendChild(tempObj);
          this.dotObjArr.push(tempObj);
          if (i == this.pageIndex) {
            tempObj.className = this.dotClassName
          } else {
            tempObj.className = this.dotOnClassName
          };
          tempObj.title = "第" + (i + 1) + "页";
          sina.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))
        }
      }
    };
    if (this.autoPlay) {
      this.play()
    }
  };
  this.leftMouseDown = function() {
    if (_state != "ready") {
      return
    };
    _state = "floating";
    _scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)
  };
  this.rightMouseDown = function() {
    if (_state != "ready") {
      return
    };
    _state = "floating";
    _scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)
  };
  this.moveLeft = function() {
    if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {
      this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth
    } else {
      this.scrollContDiv.scrollLeft += this.space
    };
    this.accountPageIndex()
  };
  this.moveRight = function() {
    if (this.scrollContDiv.scrollLeft - this.space <= 0) {
      this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space
    } else {
      this.scrollContDiv.scrollLeft -= this.space
    };
    this.accountPageIndex()
  };
  this.leftEnd = function() {
    if (_state != "floating") {
      return
    };
    _state = "stoping";
    clearInterval(_scrollTimeObj);
    var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;
    this.move(fill)
  };
  this.rightEnd = function() {
    if (_state != "floating") {
      return
    };
    _state = "stoping";
    clearInterval(_scrollTimeObj);
    var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;
    this.move(fill)
  };
  this.move = function(num, quick) {
    var thisMove = num / 5;
    if (!quick) {
      if (thisMove >
        this.space) {
        thisMove = this.space
      };
      if (thisMove < -this.space) {
        thisMove = -this.space
      }
    };
    if (Math.abs(thisMove) < 1 && thisMove != 0) {
      thisMove = thisMove >= 0 &#63; 1 : -1
    } else {
      thisMove = Math.round(thisMove)
    };
    var temp = this.scrollContDiv.scrollLeft + thisMove;
    if (thisMove > 0) {
      if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {
        this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth
      } else {
        this.scrollContDiv.scrollLeft += thisMove
      }
    } else {
      if (this.scrollContDiv.scrollLeft - thisMove <= 0) {
        this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove
      } else {
        this.scrollContDiv.scrollLeft += thisMove
      }
    };
    num -= thisMove;
    if (Math.abs(num) == 0) {
      _state = "ready";
      if (this.autoPlay) {
        this.play()
      };
      this.accountPageIndex();
      return
    } else {
      this.accountPageIndex();
      setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)
    }
  };
  this.next = function() {
    if (_state != "ready") {
      return
    };
    _state = "stoping";
    this.move(this.pageWidth, true)
  };
  this.play = function() {
    if (!this.autoPlay) {
      return
    };
    clearInterval(_autoTimeObj);
    _autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)
  };
  this.stop = function() {
    clearInterval(_autoTimeObj)
  };
  this.pageTo = function(num) {
    if (_state != "ready") {
      return
    };
    _state = "stoping";
    var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;
    this.move(fill, true)
  };
  this.accountPageIndex = function() {
    this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);
    if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {
      this.pageIndex = 0
    };
    var i;
    for (i = 0; i < this.dotObjArr.length; i++) {
      if (i == this.pageIndex) {
        this.dotObjArr[i].className = this.dotClassName
      } else {
        this.dotObjArr[i].className = this.dotOnClassName
      }
    }
  }
};
ログイン後にコピー

3. HTML ファイルを作成します: 

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>实现滚动轮播的效果</title>
    <style type="text/css">
      .nav {
        width: 1100px;
        height: 160px;
        /*border: 1px solid red;*/
        margin-left: 140px;
        position: relative;
        cursor: pointer;
        margin-top: 15px;
        overflow: hidden;
        border: 1px solid red
      }
      .nav #nav-all {
        width: auto;
        height: 160px;
        position: absolute;
        left: -30px;
      }
      .nav .nav-i {
        width: 194px;
        height: 158px;
        background: #fff;
        border: 1px solid #d8d8d8;
        float: left;
        margin-left: 30px;
      }
      .nav .nav-img {
        text-align: center;
        padding-top: 50px;
      }
      .nav .nav-name {
        width: 192px;
        height: 30px;
        background: #f2f2f2;
        margin-top: 33px;
        line-height: 30px;
      }
      .nav .nav-name a {
        font-size: 16px;
        font-family: '微软雅黑';
        padding-left: 10px;
        cursor: pointer;
      }
      .nav .nav-name a:hover {
        color: #4a7abe;
      }
      #last {
        position: absolute;
        left: 0;
        top: 50px;
      }
      #next {
        position: absolute;
        right: 0;
        top: 50px;
      }
      .last-next {
        /*display: none;*/
        
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="nav" id="nav">
      <div id="nav-all">
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统1</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统2</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统3</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统4</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统5</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统6</a>
          </div>
        </div>
        <div class="nav-i">
          <div class="nav-img">
            <img src="img/icon1.png" />
          </div>
          <div class="nav-name"><a>BI系统7</a>
          </div>
        </div>
      </div>
      <a class="last-next" id="last">
        <img src="img/last.png" />
      </a>
      <a class="last-next" id="next">
        <img src="img/next.png" />
      </a>
    </div>
    <script src="play.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
      var scrollPic_02 = new ScrollPic();
      scrollPic_02.scrollContId = "nav-all";//存放所有轮播元素的div
      scrollPic_02.arrLeftId = "last"; //左箭头ID
      scrollPic_02.arrRightId = "next"; //右箭头ID
      scrollPic_02.frameWidth = 1102; //显示框宽    sfdasdfakfl;jlkajka;d度
      scrollPic_02.pageWidth = 226; //翻页宽度
      scrollPic_02.speed = 10; //移动速度(毫秒，越小越快)
      scrollPic_02.space = 20; //每次移动像素(单位px，越大越快)
      scrollPic_02.autoPlay = true; //自动播放:true|false
      scrollPic_02.autoPlayTime = 2; //自动播放间隔时间(秒)
      scrollPic_02.initialize(); //初始化
       //--><!]]>
    </script>
  </body>

</html>
ログイン後にコピー

その中で: スタイルを自分でデバッグします。最も重要なのは下部のスクリプトです。効果を達成するためにこれらを設定します。

次回カルーセルを書きたい場合は、スタイルを変更し、スクリプト内の一部のデータを変更するだけです。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

関連ラベル：
js 写真 カルーセル
ソース：php.cn
前の記事：javascript_javascript スキルに実装された単純なフォーム検証 次の記事：jQueryネイティブアニメーションeffect_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
複数のルートで宣言されたワーカープールは、しきい値を気にせずに CPU 使用率を維持できますか CPU を集中的に使用するタスクを処理するワーカープールを備えた Node.js システムを見つけたいと考えていますが、複数のルートにわたる CPU 使用率については少し混乱してい...
から 2024-04-06 19:54:23
0
1
444
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
Nuxt.js で作成したダッシュボードをデプロイするには SSG を使用する必要がありますか? Nuxt.jsを使用して社内向けのダッシュボードを開発していきます。これは内部ダッシュボードであるため、ユニバーサル スキーマは必要ありません。通常、ほとんどのダッシュボードは S...
から 2024-04-06 13:17:44
0
1
493
Electron はプリロード時に AppData を取得します プリロードされた AppData ディレクトリを取得するにはどうすればよいですか? Background.js[...]asyncfunctioncreateWindow(){co...
から 2024-04-06 11:05:31
0
1
417
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート