《jQuery图片轮播插件-前端开发必看_》由会员分享，可在线阅读，更多相关《jQuery图片轮播插件-前端开发必看_（12页珍藏版）》请在金锄头文库上搜索。
1、jQuery图片轮播插件-前端开发必看_ 这篇文章主要介绍了jQuery图片轮播插件代码的相关资料,在各大网站都可以简洁图片轮播效果，特别有用，需要的伴侣可以参考下 还记得以前刚接触前端的时候，扫瞄各大网站，许多都少不了的有个轮播的效果，那个时候自己是一个彻彻底底的小白，想着这些图片滚动起来还真是有意思，是什么让这些图片在一个方向上连续的滚动呢。后来慢慢的接触多了，觉得这些也是so easy的嘛，于是为了加深对js、jQuery的理解以及探究网站上各种效果的实现方法，就有了jQuery插件之路这样一个系列，当然为了纪念当时对轮播的执念，于是就从轮播开头写了一个小小的插件，这只是一个开头，随着后
2、面的了解的更多，也会写一些更加绚丽的DEMO。有爱好的伴侣可以去看下吧。 先给大家附上效果图，假如大家感觉还不错，请参考实现代码 好了废话不多说了，下面附上代码。 代码如下: HTML部分： div class=slider div class=ul-box ul lia href=javascript:;img src=img/1.jpg/a/li lia href=javascript:;img src=img/2.jpg/a/li lia href=javascript:;img src=img/3.jpg/a/li lia href=javascript:;img src=img/4.
3、jpg/a/li lia href=javascript:;img src=img/5.jpg/a/li lia href=javascript:;img src=img/6.jpg/a/li /ul /div div class=mask/div div class=previmg src=img/btn_l.png/div div class=nextimg src=img/btn_r.png/div /div script src=js/jquery-1.11.3.js/script script src=js/slider.js/script script $(.slider).sli
4、der( width : 640, height : 270, during : 2021, /动画执行间隔 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; flo
5、at: 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%); .slid
6、er .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
7、-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(
8、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
9、= $(.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.
10、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 ul
11、Fir = 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
12、 + 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-
13、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);
