jQuery-轮播图(友善滴滚动切换)
2013-09-08 13:59
274 查看
<div id="gy-slide"> <div class="gy-slide-scroll"> <ul> <li><a href="#"><img src="img/n1.jpg" alt=""></a></li> <li><a href="#"><img src="img/n2.jpg" alt=""></a></li> <li><a href="#"><img src="img/n3.jpg" alt=""></a></li> <li><a href="#"><img src="img/n4.jpg" alt=""></a></li> <li><a href="#"><img src="img/n5.jpg" alt=""></a></li> </ul> </div> <div class="gy-slide-btn"> <i class="gy-slide-home">首页</i> <i class="gy-slide-prev gy-slide-no">上一页</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">下一页</i> <i class="gy-slide-end">尾页</i> </div> </div>
View Code
-------------JS--------------
/*----使用说明 结构必需一致;多次调用时,最外层赋予不同的id或类名即可 */ /*----参数 @ wrap [String] 外层元素的类名或id @ auto [Boolean] 不设置默认是不自动播放;设置为true,自动播放 @ speed [Number] 每隔几秒图片切换,默认是4秒 */ 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; //索引 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; //页码处理 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; this.btnClick(); if(this.auto){ this.autoPlay(); this.wrap.hover(function(){ clearInterval(_that.timer); },function(){ _that.autoPlay(); }); } } }
相关文章推荐
- jQuery图片轮播滚动切换代码分享
- jquery banner广告幻灯片图片轮播切换,模仿实现当当网滚动广告效果
- jQuery图片轮播滚动切换代码分享
- jQuery轮播图效果+ bxCarousel实现图片滚动切换效果+Mootools Videobox实现视频图片弹出类lightbox效果
- jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
- jquery文字轮播 滚动
- Jquery数字上下滚动动态切换插件
- jQuery实现的图文高亮滚动切换特效实例
- jQuery 循环图片滚动切换效果代码
- JQuery 图片滚动轮播的雏形
- jquery制作banner图片左右上下切换滚动特效
- JQuery 图片滚动轮播示例代码
- jQuery滚动轮播插件onepage-scroll
- JQuery实现图片轮播滚动效果
- 超炫酷的jQuery轮播焦点图 底部带切换缩略图
- Jquery仿百度经验左右滚动切换效果(转)
- 基于jquery带时间轴的图片轮播切换代码
- jQuery网站新闻公告上下滚动自动轮播代码