JQuery-slideshow (friendly drop-and-scroll switching)

Online instance: http://www.lgyweb.com/slider/

[Processing]Here, the image is rotated in a small way: when you are in the status of page 1st, you click Page 5th, and 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----------------

{:;:;:;:;:;:;}{:;:;:;}{:;:;:;}{:;:;:;:; :;:;}{:;:;}{:;:;}View Code

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

Homepage previous 1 2 3 4 5 next last pageView Code

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

.wrap =.scroll = .wrap.find('.gy-slide-scroll ul'.li = .scroll.find('li'.btn_num = .wrap.find('.gy-slide-btn span'.btn_home = .wrap.find('.gy-slide-home'.btn_end = .wrap.find('.gy-slide-end'.btn_prev = .wrap.find('.gy-slide-prev'.btn_next = .wrap.find('.gy-slide-next'.index = 0;     .refer = 0.ctrl = .len = .move_w = .auto = opt.auto == ?:.speed = opt.speed || 4= _that = = 0( i<.refer : _w = - .move_w; i==.refer : ;:_w = .refer =.li.eq(i).css({'position':'absolute','left':_w+'px','top':0.scroll.stop(,).animate({'left':-_w+'px'},'left':0'style','').eq(i).css({'position':'absolute','left':0,'top':0( callback == 'function'.btn_num.removeClass("gy-slide-cur").eq(i).addClass("gy-slide-cur".btn_prev.add(.btn_next).removeClass("gy-slide-no"(n==0.btn_prev.addClass("gy-slide-no" (n==(.len-1.btn_next.addClass("gy-slide-no" _that =         .btn_num.click((_that.btn_num.index($())==_that.index) (!_that.ctrl) = = _that.btn_num.index($(=         .btn_home.click(= 0        .btn_end.click(= _that.len - 1        .btn_prev.click(($().hasClass("gy-slide-no")) (!_that.ctrl) = --=         .btn_next.click(($().hasClass("gy-slide-no")) (!_that.ctrl) = ++=  _that = (.timer) clearInterval(.timer = setInterval(++(_that.index=== 0.speed*1000 _that = (.wrap.hover(