Jquery encapsulates the specific implementation of tab automatic switching effect_jquery

My internet speed is really slow today. I have to wait for a long time to open a webpage, but I still want to write an article. Automatic tab switching. Because I often encounter such problems at work, writing a blog is also the most important thing. I can share it and refer to it if I encounter something similar in the future! Of course, this is how the page I encapsulated with Jquery can be called multiple times. new tabSlider(obj, count); obj refers to the outermost ID of the container, and count refers to multiple li. Of course, if you want to quote my js, you must follow my structure. Come and write! Below is some structure of my HTML as follows:

Copy code The code is as follows:

< div id="tab1">
 

 
• tab1

 
• tab2                                                                                                    content-main">
  " "
  tab1
  
  " "
  tab2
  
  " ="content hide">tab3

 

tab4

The structure is like this! Below is the code for the HTML/CSS on my page!

Copy code

The code is as follows:

   

       
• tab1

       
• tab2

       
• tab3

       
• tab4

   

   

       

tab1

       

tab2

       

tab3

       

tab4

   

   

       
• tab1

       
• tab2

       
• tab3

       
• tab4

   

   

       

tab1

       

tab2

       

tab3

       

tab4

   

<script>new tabSlider("#tab1",4);</script>
<script>new tabSlider("#tab2",4);</script>

JS代码如下：

复制代码 代码如下:

// JavaScript Document
/*
*@date 2011 10 24
*@ author tugenhua
*@ email tugenhua@126.com
*@ can be one page Multiple references
Dependent structure*/

• tab1
🎜> 

 

  

tab1

  

tab2

 

tab3

 

tab4

/*How to refer to the page
new tabSlider("#tab1",4);
#tab1 is the external ID, 4 refers to the total number li
*/
function tabSlider(obj,count){
var _this = this;
_this.obj = obj;
_this.count = count;
_this.time = 2000; //Stay time
_this.n = 0;
var t;
this.slider = function(){
_this.n = 0;
var t; " .menu li").index(this);
                                                                                            .n = index;                                                                            ){t=setInterval(_this.autoplay,_this.time)}); 1)? 0 : _this.n;
                                                                                                   (){
this.slider();
this.addhover();
t = setInterval(this.autoplay,_this.time);
}
this.factory ();
}


Let me talk about my idea of ​​encapsulating this js, because the idea is the most important when writing any program. As long as you can think clearly, the code will definitely be implemented! To put it more nicely, the idea is what we often call “algorithm”!
1 function tabSlider(obj,count){} Use this js to encapsulate and pass in the parameters! When on an HTML page, just call tabSlider(obj, count) directly!
2 Initialize some parameters and then customize a function this.slider = function(){} for this function. Bind a mouseover event. When initializing the first li, check whether the current div content points to the same pointer as the current li. If the same piece of content is displayed! Others are hidden!
3 Customize this.addHover event to fire this event when the mouse moves over!
4 Custom autoplay event this.autoplay = function(){} This uses the trigger method _this.n = _this.n >=(_this.count-1)? 0 : _this.n ;
$(_this.obj " .menu li").eq(_this.n).trigger("mouseover");
5 Finally, use a function to render the above function and call the above function

Copy code The code is as follows:

this.factory = function(){
this.slider( );
this.adhover();
t = setInterval(this.autoplay,_this.time);
}
this.factory();