jQuery는 친숙한 캐러셀 이미지를 구현합니다.

먼저 렌더링:

[처리 중] 이곳의 사진 스크롤 캐러셀이 약간 처리되었습니다. 5페이지의 1페이지를 클릭하면 사진이 2-3-4-5 대신 하나씩 스크롤됩니다. 현기증)

구현 방법은 다음과 같습니다.

나머지는 소스코드를 공유합니다:

---------css---

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

.gy-슬라이드-스크롤 {
위치: 상대;
          너비: 320px;
높이: 200px;
         오버플로: 숨김;
          왼쪽: 50%;
         왼쪽 여백: -160px;
}
.gy-slide-scroll ul{
위치: 절대;
          왼쪽: 0;
상단: 0;
}
.gy-slide-btn {
         여백 상단: 10px;
         텍스트 정렬: 가운데;
         패딩: 5px 0;
}
.gy-slide-btn 범위, .gy-slide-btn i {
         왼쪽 여백: 5px;
         글꼴 스타일: 일반;
          글꼴:12px/1 tahoma,arial,"Hiragino Sans GB",5b8b4f53;
         커서: 포인터;
테두리: 1px 실선 #ccc;
         패딩: 4px 6px;
}
.gy-slide-btn .gy-slide-cur {
        배경색: #999;
색상: #fff;
}
.gy-slide-btn .gy-slide-no{
        색상: #ccc;
         커서: 기본값;
}

----------HTML---------

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

       

           

               
• 

               
• 

               
• 

               
• 

               
• 

           

       

       

            首页
            上一页
            1
            2
            3
            4
            5
            下一页
            尾页
       

   

---------------JS---------------

复主代码 代码如下:

/*----사용 지침
구조는 일관성이 있어야 합니다. 여러 번 호출할 때 가장 바깥쪽 레이어에 다른 ID나 클래스 이름을 할당하면 됩니다.
*/
/*----매개변수
@wrap [String] 외부 요소의 클래스 이름 또는 ID
@ auto [부울] 설정하지 않으면 기본값은 자동으로 재생되지 않으며, true로 설정하면 자동으로 재생됩니다.
@speed [숫자] 몇 초마다 이미지를 전환하며 기본값은 4초입니다
*/
함수 Gy_slider(opt){
This.wrap = $(opt.wrap);
This.scroll = this.wrap.find('.gy-slide-scroll ul');
This.li = this.scroll.find('li');
This.btn_num = this.wrap.find('.gy-slide-btn 스팬');
This.btn_home = this.wrap.find('.gy-slide-home');
This.btn_end = this.wrap.find('.gy-slide-end');
This.btn_prev = this.wrap.find('.gy-slide-prev');
This.btn_next = this.wrap.find('.gy-slide-next');
This.index = 0; //인덱스
This.refer = 0
This.ctrl = true;
This.len = this.li.length;
This.move_w = this.scroll.parent().width();
This.auto = opt.auto == true?true:false;
This.speed = opt.speed 4;
This.init();
}
Gy_slider.prototype = {
imgShow:함수(i,콜백){
        var _that = 이,
               _w = 0;
        스위치(true){
케이스 i              사례 i==this.refer: return;break;
                 기본값:_w = this.move_w;
            }
This.refer = i;
This.li.eq(i).css({'position':'absolute','left':_w 'px','top':0});
This.scroll.stop(true,true).animate({'left':-_w 'px'},function(){
                _that.scroll.css({'left':0});
                _that.li.attr('style','').eq(i).css({'position':'absolute','left':0,'top':0});
If(콜백 유형 == '함수'){
                 콜백();
            }
        });
This.btn_num.removeClass("gy-slide-cur").eq(i).addClass("gy-slide-cur");
},
isCtrl:함수(n){
This.btn_prev.add(this.btn_next).removeClass("gy-slide-no");
If(n==0){
This.btn_prev.addClass("gy-slide-no");
           }else if(n==(this.len-1)){
This.btn_next.addClass("gy-slide-no");
}
},
btnClick:함수(){
        var _that = this;
//페이지 번호 처리
This.btn_num.click(함수(){
If(_that.btn_num.index($(this))==_that.index) return;
If(!_that.ctrl) return;
               _that.ctrl = false;
               _that.index = _that.btn_num.index($(this));
               _that.isCtrl(_that.index);
               _that.imgShow(_that.index,function(){
                    _that.ctrl = true;
            });
        });
//홈
        this.btn_home.click(function(){
            _that.index = 0;
            _that.isCtrl(_that.index);
            _that.imgShow(_that.index);
        });
        //尾页
        this.btn_end.click(함수(){
            _that.index = _that.len - 1;
            _that.isCtrl(_that.index);
            _that.imgShow(_that.index);
        });
        //상일页
        this.btn_prev.click(함수(){
            if($(this).hasClass("gy-slide-no")) return;
            if(!_that.ctrl) return;
            _that.ctrl = false;
            _that.index--;
            _that.isCtrl(_that.index);
            _that.imgShow(_that.index,function(){
                _that.ctrl = true;
            });
        });
        //下一页
        this.btn_next.click(function(){
            if($(this).hasClass("gy-slide-no")) return;
            if(!_that.ctrl) return;
            _that.ctrl = false;
            _that.index ;
            _that.isCtrl(_that.index);
            _that.imgShow(_that.index,function(){
                _that.ctrl = true;
            });
        });

    },
    자동 재생:기능(){
        var _that = this;
        if(this.timer)clearInterval(this.timer);
        this.timer = setInterval(function(){
            _that.index ;
            if(_that.index==_that.len){
                _that.index = 0;
            }
            _that.isCtrl(_that.index);
            _that.imgShow(_that.index);
        },this.speed*1000);
    },
    초기화:함수(){   
        var _that = 이것;       
        this.btnClick();
        if(this.auto){
            this.autoPlay();
            this.wrap.hover(함수(){
                clearInterval(_that.timer);
            },함수(){
                _that.autoPlay();
            });
        }
    }
}

코드는 매우 간결하지만 효과가 매우 좋고 실용적입니다. 친구들이 꾸미고 나서 자신의 프로젝트에 사용할 수 있습니다.