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

WBOY
풀어 주다: 2016-05-16 17:28:54
원래의
1270명이 탐색했습니다.

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

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

< div id="tab1">

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


无标题文档


#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

        < div class="hide">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();
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿