jquery implements friendly carousel picture special effects _jquery

First up Effect chart:

"Processing" Here is the picture scrolling carousel, doing a little bit of processing: When on page 1th, you click on page 5th, the picture scrolling is a slide over, not from the 2-3-4-5 (this more than scrolling, see dizziness);

This is done by:

The rest is the source code sharing:

-------CSS----------------

Copy Code code 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 Code code 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" > Home </i>
<i class= "Gy-slide-prev gy-slide-no" > Prev </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 </i>
</div>
</div>

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

Copy Code code as follows:

/*----Usage Instructions
structure must be consistent; When called more than once, the outermost layer gives a different ID or class name
*/
/*----Parameters
The class name or ID of the outer element of @ Wrap [String]
@ Auto [Boolean] is not set by default is not AutoPlay, set to True, AutoPlay
@ Speed [number] picture switch every few seconds, default 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 (' li ');
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+ ' 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 (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 () ==_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;
});
});
Home
This.btn_home.click (function () {
_that.index = 0;
_that.isctrl (_that.index);
_that.imgshow (_that.index);
});
Last
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, but also very practical, small partners to beautify themselves can be used in their own projects.