Home > Article > Web Front-end > Jquery encapsulates the specific implementation of tab automatic switching effect_jquery

Jquery encapsulates the specific implementation of tab automatic switching effect_jquery

WBOYOriginal: 2016-05-16 17:28:541273browse

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

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

/*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();

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Simple example of jquery scroll bar eventNext article：Simple example of jquery scroll bar event

See more

Jquery encapsulates the specific implementation of tab automatic switching effect_jquery

Related articles