JQuery provides friendly carousel image effects and jquery image effects.

JQuery provides friendly carousel image effects and jquery image effects.

First:

[Processing] Here, the image is rotated and processed in a small way: When you click Page 1st in the 5th page status, the image scroll is a slide, instead of from 2-3-4-5 (this kind of multi-scroll, see Dizzy );

The implementation method is as follows:

The rest is source code sharing:

------- Css ----------------

Copy codeThe Code is as follows:
. Gy-slide-scroll {
Position: relative;
Width: 320px;
Height: 200px;
Overflow: hidden;
Left: 50%;
Margin-left:-160px;
}
. Gy-slide-scroll ul {
Position: absolute;
Left: 0;
Top: 0;
}
. Gy-slide-btn {
Margin-top: 10px;
Text-align: center;
Padding: 5px 0;
}
. Gy-slide-btn span,. gy-slide-btn I {
Margin-left: 5px;
Font-style: normal;
Font: 12px/1 tahoma, arial, "Hiragino Sans GB", \ 5b8b \ 4f53;
Cursor: pointer;
Border: 1px solid # ccc;
Padding: 4px 6px;
}
. Gy-slide-btn. gy-slide-cur {
Background-color: #999;
Color: # fff;
}
. Gy-slide-btn. gy-slide-no {
Color: # ccc;
Cursor: default;
}

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

Copy codeThe Code is as follows:
<Div id = "gy-slide">
<Div class = "gy-slide-scroll">
<Ul>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
</Ul>
</Div>
<Div class = "gy-slide-btn">
<I class = "gy-slide-home"> homepage </I>
<I class = "gy-slide-prev gy-slide-no"> previous page </I>
<Span class = "gy-slide-cur"> 1 </span>
<Span> 2 </span>
<Span> 3 </span>
<Span> 4 </span>
<Span> 5 </span>
<I class = "gy-slide-next"> next page </I>
<I class = "gy-slide-end"> last page </I>
</Div>
</Div>

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

Copy codeThe Code is as follows:
/* ---- Instructions for use
The structure must be consistent. Multiple calls require different IDs or class names for the outermost layer.
*/
/* ---- Parameter
@ Wrap [String] The class name or id of the outer Element
@ Auto [Boolean] If this parameter is not set, automatic playback is disabled by default. If this parameter is set to true, automatic playback is enabled.
@ Speed [Number] switch the image every several seconds. The default value is 4 seconds.
*/
Function Gy_slider (opt ){
This. wrap = $ (opt. wrap );
This. scroll = this. wrap. find ('. gy-slide-scroll ul ');
This. li = this. scroll. find ('lil ');
This. btn_num = this. wrap. find ('. gy-slide-btn span ');
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; // index
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 <this. refer: _ w =-this. move_w; break;
Case I = this. refer: return; break;
Default: _ w = this. move_w;
}
This. refer = I;
This.li.eq( I ).css ({'position': 'absolute ', 'left': _ w + 'P', 'top': 0 });
This. scroll. stop (true, true). animate ({'left':-_ w + 'px'}, function (){
_That.scroll.css ({'left': 0 });
_That.li.attr('style', ''hangzhou.eq(iyun.css ({'position': 'absolute ', 'left': 0, 'top': 0 });
If (typeof callback = 'function '){
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;
// Page number processing
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;
});
});
// Homepage
This. btn_home.click (function (){
_ That. index = 0;
_ That. isCtrl (_ that. index );
_ That. imgShow (_ that. index );
});
// Last page
This. btn_end.click (function (){
_ That. index = _ that. len-1;
_ That. isCtrl (_ that. index );
_ That. imgShow (_ that. index );
});
// Previous Page
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;
});
});
// Next page
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;
This. btnClick ();
If (this. auto ){
This. autoPlay ();
This. wrap. hover (function (){
ClearInterval (_ that. timer );
}, Function (){
_ That. autoPlay ();
});
}
}
}

The code is very concise, the effect is very good, and it is also very practical. You can use your own projects by beautifying yourself.