Jquery는 탭 자동 전환 effect_jquery의 특정 구현을 캡슐화합니다.

요즘 인터넷 속도가 너무 느려서 웹페이지를 열려면 한참을 기다려야 하는데 그래도 글을 쓰고 싶어요.. 직장에서 이런 문제가 자주 발생하기 때문에 블로그 작성도 가장 중요해요. 중요한 건 공유해서 나중에 비슷한 일이 생기면 참고할 수 있을 것 같아요! 물론 이것은 Jquery로 캡슐화한 페이지를 여러 번 호출할 수 있는 방법입니다. new tabSlider(obj, count); obj는 컨테이너의 가장 바깥쪽 ID를 참조하고, count는 여러 li를 참조합니다. 내 js를 인용해 보세요. 내 구조를 따라야 합니다. 다음은 내 HTML의 일부 구조입니다.

코드 복사 코드는 다음과 같습니다.

< div id="tab1">
 

 
• tab1

 
• tab2< ;/li> ;
                                                                                      content-main">
  " "
  tab1
  
  " "
  tab2< ;/div>
  " ="content hide">tab3
  
   
  tab4
  
  
  
  구조 이렇습니다! 아래는 내 페이지의 HTML/CSS 코드입니다!
  
  
  

코드 복사

코드는 다음과 같습니다.

#tab1{ 너비:196px; 높이:220px; 오버플로:숨김; 테두리:1px 단색 #666;}
#tab2{ 너비:196px; 높이:220px; 오버플로:숨김; 테두리:1px 단색 #666;}
.menu{ 너비:196px; 높이:18px; 여백:0; 패딩:0;}
.menu li{ float:left; 목록 스타일:없음; 너비:48px; 텍스트 정렬:가운데; 테두리 하단:1px 솔리드 #666; 테두리 오른쪽:1px 솔리드 #666; 커서:포인터;}
.menu li.current{ border-bottom:none;}
.content-main{ 너비:196px; 높이:200px; 오버플로:숨김;}
.content{ 너비:196px; 높이:200px; 오버플로:숨김; 디스플레이:블록;}
.hide{ 디스플레이:없음;너비:196px; 높이:200px; 오버플로:숨김;}
.menu li.last-col{ border-right:none; width:49px;}

   

       
• tab1

       
• tab2< ;/li>
         
• tab3

       
• tab4

   

   

       

tab1

       

tab2

        < div class="hide">tab3

       

tab4

   

   

       
• 
         
• tab2

       
• tab3

       
• tab4

   

   

       

tab1

       

tab2

       

tab3

       

tab4

    < /div>

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

JS代码如下：

复代码码 代码如下:

// JavaScript 문서
/*
*@date 2011 10 24
*@ 작성자 tugenhua
*@ 이메일 tugenhua@126.com
*@ 중 하나일 수 있습니다. 페이지 다중 참조
종속 구조*/

• 🎜> 

 

  

div class="content hide">tab2

 

tab3

 

tab4

/*페이지 참조 방법

#tab1은 외부 ID, 4는 총 개수를 나타냅니다.
*/
function tabSlider(obj,count){
var _this = this
_this.obj = obj; count;
_this.time = 2000; // 체류 시간
_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)?
                                                                                    (){
this.slider() ;
this.addhover();
t = setInterval(this.autoplay,_this.time)
}
this .공장 ()
}


어떤 프로그램을 작성할 때 아이디어가 가장 중요하기 때문에 이 js를 캡슐화하려는 나의 아이디어에 대해 이야기하겠습니다. 명확하게 생각할 수 있는 한 코드는 반드시 구현될 것입니다! 더 좋게 말하면, 우리가 흔히 "알고리즘"이라고 부르는 아이디어입니다!
1개 함수 tabSlider(obj,count){} 이 js를 사용하여 매개변수를 캡슐화하고 전달하세요! HTML 페이지에서는 tabSlider(obj, count)를 직접 호출하면 됩니다!
2 일부 매개변수를 초기화한 다음 이 함수에 대해 this.slider = function(){} 함수를 사용자 정의합니다. 첫 번째 li를 초기화할 때 현재 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();