jQuery图片轮播插件——前端开发必看

时间:2021-05-26

还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢。后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js、jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO。有兴趣的朋友可以去看下吧。

先给大家附上效果图,如果大家感觉还不错,请参考实现代码

好了废话不多说了,下面附上代码。

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部分:

*{margin: 0;padding: 0;box-sizing: border-box;}.slider{position: relative;overflow: hidden;}.slider ul{list-style: none;float: left;}.slider ul li{float: left;}.slider .mask{position: absolute;bottom: 0;width: 100%;background-color: rgba(0, 0, 0, .3);}.slider .mask .sliderBtn{position: absolute;border-radius: 50%;background-color: #fff;cursor: pointer;background: radial-gradient(white 20%, transparent 50%);}.slider .prev, .slider .next{position: absolute;width: 45px; height: 100%;background-color: rgba(0, 0, 0, .2);cursor: pointer;top: 0;display: none;}.slider .prev{left: 0;}.slider .next{right: 0;}.slider .prev img, .slider .next img{position: absolute;top: 50%;left: 50%;margin-top: -22.5px;margin-left: -22.5px;}

JS部分:

(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);//添加btnfor(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)

以上代码是小编给大家介绍的jQuery图片轮播插件代码,希望对大家有帮助,如果大家有疑问欢迎给我留言小编会及时回复大家的的,在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章