ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery はタブの自動切り替えの特定の実装をカプセル化します。
Jquery はタブの自動切り替えの特定の実装をカプセル化します。
- WBOYオリジナル
- 2016-05-16 17:28:541307ブラウズ
今日はインターネットの速度が非常に遅いので、Webページを開くのに長い時間がかかりますが、それでも記事を書きたいのですが、仕事でこのような問題に遭遇することがよくあります。大切なことを共有していただければ、今後同じようなことがあった際に参考にしていただけます！ もちろん、これは Jquery でカプセル化したページを複数回呼び出す方法です。 new tabSlider(obj, count); obj はコンテナの最も外側の ID を参照し、count は複数の li を参照します。私の JS を引用してください。私の構造に従ってください。以下は私の HTML の構造の一部です:
コードをコピー コードは次のとおりです:
コードをコピー
コードは次のとおりです:
無标题文档
< div class="非表示">tab3
// JavaScript Document
/*
*@date 2011 10 24
*@ author tugenhua
*@ email tugenhua@126.com
*@ は 1 つですページ 複数の参照
依存構造*/
🎜>
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();
tab1
tab2
< div class="非表示">tab3
tab4
tab1
tab3
复制代码代码如下:
// JavaScript Document
/*
*@date 2011 10 24
*@ author tugenhua
*@ email tugenhua@126.com
*@ は 1 つですページ 複数の参照
依存構造*/
tab1
div class="コンテンツ非表示">tab2tab3
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 までご連絡ください。