ホームページ  >  記事  >  ウェブフロントエンド  >  Jquery はタブの自動切り替えの特定の実装をカプセル化します。

Jquery はタブの自動切り替えの特定の実装をカプセル化します。

WBOY
WBOYオリジナル
2016-05-16 17:28:541273ブラウズ

今日はインターネットの速度が非常に遅いので、Webページを開くのに長い時間がかかりますが、それでも記事を書きたいのですが、仕事でこのような問題に遭遇することがよくあります。大切なことを共有していただければ、今後同じようなことがあった際に参考にしていただけます! もちろん、これは Jquery でカプセル化したページを複数回呼び出す方法です。 new tabSlider(obj, count); obj はコンテナの最も外側の ID を参照し、count は複数の li を参照します。私の JS を引用してください。私の構造に従ってください。以下は私の HTML の構造の一部です:

コードをコピー コードは次のとおりです:



コードをコピー
コードは次のとおりです:


無标题文档








tab1

tab2

< div class="非表示">tab3

tab4









tab1

tab3

复制代码代码如下:

// JavaScript Document
/*
*@date 2011 10 24
*@ author tugenhua
*@ email tugenhua@126.com
*@ は 1 つですページ 複数の参照
依存構造*/

  • 🎜>
    tab1
    div class="コンテンツ非表示">tab2

    tab3

    tab4


    new tabSlider("#tab1",4);外部 ID、4 は合計数を指します li
    */
    function tabSlider(obj,count){
    var _this = this;
    _this.obj = obj; count;
    _this.time = 2000; // 滞在時間
    _this.n = 0;
    this.slider = function(){
    _this.n = 0;
    var t; " .menu li").index(this); .n = インデックス; ){t=setInterval(_this.autoplay,_this.time)}); 1)? n;
    (){
    this.slider() ;
    this.addhover();
    t = setInterval(this.autoplay,_this.time); .factory();
    }


    この js をカプセル化するという私のアイデアについて話しましょう。このアイデアはプログラムを書くときに最も重要です。明確に考えることができれば、コードは必ず実装されます。よりわかりやすく言えば、そのアイデアは私たちがよく「アルゴリズム」と呼ぶものです。
    1 関数 tabSlider(obj,count){} この js を使用してカプセル化してパラメータを渡します。 HTML ページ上では、tabSlider(obj, count) を直接呼び出すだけです。
    2 いくつかのパラメータを初期化し、この関数の this.slider = function(){} をカスタマイズします。最初の li を初期化するときに、現在の div コンテンツが現在の div コンテンツと同じポインタを指しているかどうかを確認します。 li.同じコンテンツが表示される場合!他は隠れてます!
    3 this.addHover イベントをカスタマイズして、マウスが上に移動したときにこのイベントを起動します。
    4 カスタム自動再生イベント this.autoplay = function(){} これはトリガー メソッド _this.n = _this.n >=(_this.count-1)? 0 : _this.n ;
    $( _this.obj " .menu li").eq(_this.n).trigger("mouseover");
    5 最後に、関数を使用して上記の関数をレンダリングし、上記の関数を呼び出します
    コードをコピー コードは次のとおりです:

    this.factory = function(){
    this.slider( ) ;
    this.adhover();
    t = setInterval(this.autoplay,_this.time);
    }
    this.factory();
    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。