jQuery实现友好的轮播图片特效

先上效果图:

【处理】 这里的图片滚动轮播,做了点小处理:当在第1页状态时,你点击第5页,图片的滚动是一张滑过,而不是从2-3-4-5(这种的多张滚动,看得头晕眼花);

实现的做法是:

剩下的就是源代码分享了:

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

代码如下:
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---------------------

代码如下:
2 3 4 5

-------------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.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(); }); } } }

代码很简洁,效果却非常棒,也很实用,小伙伴们自己美化下就可以使用到自己的项目中了。

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...