jQuery插件之路(二)——轮播
2016-05-31 14:38
585 查看
还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢。后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js、jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO。源代码在这里:点我获取代码,有兴趣的朋友可以去看下吧。好了废话不多说了,下面附上代码。
HTML部分:
CSS部分:
View Code
以上就是差不多所有的代码了,一些比较关键的地方已经用注释好了,这里就不再叙述。如果有哪些不好的地方,万望告知,不胜感谢。今天就先写到这里了,作者敲键盘码字也不容易,如果你觉得你对本文还能提得上来那么一点点兴趣的话,请稍微移动下你的右手,帮点下赞,谢谢^_^。下面附上一张效果图
HTML部分:
<div class="slider"> <div class="ul-box"> <ul> <li><a href="javascript:;"><img src="img/1.jpg"/></a></li> <li><a href="javascript:;"><img src="img/2.jpg"/></a></li> <li><a href="javascript:;"><img src="img/3.jpg"/></a></li> <li><a href="javascript:;"><img src="img/4.jpg"/></a></li> <li><a href="javascript:;"><img src="img/5.jpg"/></a></li> <li><a href="javascript:;"><img src="img/6.jpg"/></a></li> </ul> </div> <div class="mask"></div> <div class="prev"><img src="img/btn_l.png"/></div> <div class="next"><img src="img/btn_r.png"/></div> </div> <script src="js/jquery-1.11.3.js"></script> <script src="js/slider.js"></script> <script> $('.slider').slider({ width : 640, height : 270, during : 2000, //动画执行间隔 speed : 500, //动画速度 btnSize : 20, //底部遮罩层的按钮大小 btnSpace : 10, //底部的按钮间隙 direction : 1 //轮播方向默认为1,图片向左移动 }); </script>
CSS部分:
(function ($) { $.fn.slider = function (setting) { //给jQuery的实例对象绑定一个slider方法 var defaultSetting = { width : 640, height : 270, during : 3000, speed : 500, btnSize : 30, btnSpace : 10, direction : 1 } setting = $.extend(true, {}, defaultSetting, setting); //用传入的参数替换掉默认的设置 return this.each(function (i, item) { var _setInterval = window.setInterval; window.setInterval = function (callback, timer, param) { //重写setInterval函数,让其可以传参 var args = Array.prototype.slice.call(arguments, 2); var _fn = function () { callback.apply(null, args); } return _setInterval(_fn, timer); } var _this = $(this), ulBox = $('.ul-box', this), ul = $('ul', this), li = $('li', ul), img = $('img', li), len = li.size(), mask = $('.mask', this), index = 0, //用来控制按钮的下标 flag = true, //标识动画是否执行完成 gap, //执行动画的按钮下标和当前按钮的下标的差 timer; //计时器 _this.width(setting.width).height(setting.height); ulBox.width(setting.width * 3 * len).height(setting.height).css({ marginLeft: -setting.width * len }); ul.width(setting.width * len).height(setting.height); img.width(setting.width).height(setting.height); mask.height(setting.btnSize + 2 * setting.btnSpace); //添加btn for(var i = 0, str = ''; i < len; i++){ str += '<div class="sliderBtn"></div>'; } mask.html(str); var ulFir = ul.clone(true); var ulSec = ul.clone(true); var sliderBtn = $('.sliderBtn', '.mask'); ulBox.append(ulFir); ulBox.append(ulSec); sliderBtn.each(function (i, item) { $(item).css({ width : setting.btnSize, height : setting.btnSize, top : setting.btnSpace, left : parseInt(setting.width - (setting.btnSize + setting.btnSpace *2) *len, 10) /2 + setting.btnSize * i + setting.btnSpace * i * 2 + setting.btnSpace }); $(item).mouseenter(function () { gap = Math.abs(i - index); i > index ? (flag && ani(1, gap)) : (flag && ani(0, gap)); }) }); btnAni(0); //按钮样式变化 function btnAni (index) { $('.sliderBtn').css('background', 'radial-gradient(white 20%, transparent 50%)'); $('.sliderBtn').eq(index).css('background', 'radial-gradient(white 10%, transparent 30%, white 70%)'); } //动画 function ani (direction, num) { if(flag){ //默认1向左运动,0向右运动 flag = false; var ulfir = $('ul', ulBox).eq(0); var left = parseInt(ulfir.css('margin-left'), 10); if(direction){ index += num; index = index % len; left = left - num * setting.width; ulfir.animate({ marginLeft: left }, setting.speed, function () { if(left <= -len * setting.width){ ulfir = ulfir.remove(); ulfir.css('margin-left', 0); ulBox.append(ulfir); } flag = true; }); }else{ index -= num; index = index <= -1 ? len - 1 : index; left = left + num * setting.width; ulfir.animate({ marginLeft: left }, setting.speed, function () { if(left >= len * setting.width){ var ulLast = $('ul', ulBox).eq(2).remove(); ulLast.css('margin-left', 0); ulBox.prepend(ulLast); ulfir.css('margin-left', 0); } flag = true }) } btnAni(index) } } //定时器 timer = setInterval(ani, setting.during, setting.direction, 1); _this.hover(function () { $('.prev', this).css('display', 'block'); $('.next', this).css('display', 'block'); clearInterval(timer); }, function () { $('.prev', this).css('display', 'none'); $('.next', this).css('display', 'none'); timer = setInterval(ani, setting.during, setting.direction, 1); }) $('.next').click(function () { flag && ani(1, 1); }) $('.prev').click(function () { flag && ani(0, 1); }) }) } })(jQuery)
View Code
以上就是差不多所有的代码了,一些比较关键的地方已经用注释好了,这里就不再叙述。如果有哪些不好的地方,万望告知,不胜感谢。今天就先写到这里了,作者敲键盘码字也不容易,如果你觉得你对本文还能提得上来那么一点点兴趣的话,请稍微移动下你的右手,帮点下赞,谢谢^_^。下面附上一张效果图
相关文章推荐
- Json对象与Json字符串互转(4种转换方式) jquery 以及 js 的方式
- Jquery+CSS实现分页
- 利用jquery简单实现返回顶部功能
- Jquery图片上传组件,支持多文件上传
- jQuery.lazyload
- jquery jsonp 跨域
- jQuery使用经验建议
- 使用JQuery获取对象的几种方式
- jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
- 利用jQuery实现CheckBox全选/全不选/反选的简单代码
- jquery ajax 跨域
- Jquery ajax 学习记录
- jQuery页面加载初始化的3种方法
- jQuery EasyUI使用教程之使用标记创建树形菜单
- jquery datatables 1.10.9 搜索
- springmvc框架引入JqueryEasyUI失败
- jQuery文字横向滚动效果的实现代码
- jquery获取radio选中值
- 用.NET MVC实现长轮询,与jQuery.AJAX即时双向通信
- jQuery kxbdMarquee 无缝滚动