jQuery はフレンドリーなカルーセル画像を実装します Effects_jquery

まずレンダリング:

[処理] ここの画像スクロール カルーセルは少し処理されています。5 ページの 1 ページをクリックすると、画像が 2-3-4 -5 ではなく 1 つずつスクロールします (この種の複数のスクロールにより、めまい);

実装方法は次のとおりです:

残りはソース コードを共有することです:

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

コードをコピーします コードは次のとおりです:

.gy-slide-scroll {
位置: 相対;
幅: 320px;
高さ: 200px;
オーバーフロー: 非表示;
残り: 50%;
margin-left: -160px;
}
.gy-slide-scroll ul{
位置: 絶対;
左: 0;
上: 0;
}
.gy-slide-btn {
margin-top: 10px;
text-align: center;
パディング: 5px 0;
}
.gy-slide-btn スパン、.gy-slide-btn i {
margin-left: 5px;
フォント スタイル: 通常;
font:12px/1 tahoma,arial,"Hiragino Sans GB",5b8b4f53;
カーソル: ポインタ;
枠線: 1 ピクセルの実線 #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 [文字列] 外部要素のクラス名または 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:function(i,callback){
var _that = this,
_w = 0;
switch(true){
case i case 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(コールバックの種類 == '関数'){
callback();
}
});
This.btn_num.removeClass("gy-slide-cur").eq(i).addClass("gy-slide-cur");
}、
isCtrl:function(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:function(){
var _that = this;
//ページ番号処理
This.btn_num.click(function(){
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(function(){
            _that.index = _that.len - 1;
            _that.isCtrl(_that.index);
            _that.imgShow(_that.index);
        });
        //上一页
        this.btn_prev.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;
            });
        });
        //次の一页
        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;
            });
        });

}、
    autoPlay:function(){
        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);
    }、
    init:function(){
        var _that = これ;       
        this.btnClick();
        if(this.auto){
            this.autoPlay();
            this.wrap.hover(function(){
                clearInterval(_that.timer);
            },function(){
                _that.autoPlay();
            });
        }
    }
}

コードは非常に簡潔ですが、効果は非常に優れており、友人はそれを美化した後、自分のプロジェクトで使用できます。