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();
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
