首页 > 代码库 > 前端自制Jquery插件————轮播
前端自制Jquery插件————轮播
昨天，自己心血来潮，弄了一个轮播图的插件，说来你们可能不信，这是我人生第一个插件，好，那我直接讲讲我的思路好了。
首先，我以开发者的角度来看，一个好的插件的使用方式应该简单可靠，因为我做的是Jquery插件，所以最好的使用方式我觉得应该是，$(DOM).carousel(config)。其中DOM节点，用于填充轮播图片的地方，config是配置信息，包括是否循环，是否自动播放，播放时间间隔，图片地址等。因为时间短，我也只是简单实现了主要的功能。
我第一件事情做的就是布局，没错，我是先把CSS样式以及布局写好的。布局简单的说就是要让所有图片在同一行显示，溢出的用overflow:hidden隐藏。我是这么做的，有一个div叫carousel，它的大小是和开发者提供的地方大小一样，也就是width: 100%,height:100%。并且要设置overflow:hidden。接着里面就放一个div叫carousel-content。这里面就是放图片的，它的高度是占满carousel的，但是它的宽度应该是所有图片宽度的总和，这是用js设置的。而所有图片都应该是float:left，这是为了让它们并行显示。
我做的第二件事就是动画，因为我的布局不是position，所以我是用margin-left来实现位移的，margin-left:-图片宽度就能让第二张图片移动到carousel中。动画是使用jquery的animate函数。有关animate函数的使用详细的我就不说了，我只说我有用到的，animate(style,time,callback)，这里的style是指最终样式，time是动画时长，callback是执行动画完后的回调函数。我只要对carousel-content做动画就可以了。
最后一件事就是开始设计js插件了。之前我们插件的使用方式已经有了，就是$(DOM).carousel(config)。所以我的代码如下所示
(function (w,$) { $.fn.carousel = function (config) { config = config || {}; var _config = { circle: config.circle || true, // 是否循环 auto: config.auto || true, // 是否自动轮播 speed: config.speed || 1000, // 轮播动画速度 interval: 1500, // 轮播间隔 }, _imgUrls = config.imgUrls || [], // 图片地址 _index = 0, // 当前图片 _carouselContent = null, // 生成的DOM节点 _carouselImgs = [], // 生成的图片DOM节点 _carouselIcons = [], _element = this[0], _intervalId = null; _config.interval += _config.speed; // 初始化 var _init = function () { var carousel = document.createElement("div"); carousel.className = "carousel"; // 设置图片hover事件，停止动画 carousel.onmouseenter = function () { if (_intervalId) { clearInterval(_intervalId) } } // 设置鼠标离开事件，开始动画 carousel.onmouseleave = function () { _setAnimate(); } _element.appendChild(carousel); var carouselContent = document.createElement("div"), img, icon; // 创建img for (var i = 0, len = _imgUrls.length; i < len; i++) { img = document.createElement("img"); img.src = _imgUrls[i]; img.className = "carousel-img"; img.width = carousel.offsetWidth; img.height = carousel.offsetHeight; carouselContent.appendChild(img); _carouselImgs.push(img); } // 创建圆形按钮 var icons = document.createElement("div"); for (var i = 0, len = _imgUrls.length; i < len; i++) { icon = document.createElement("div"); icon.className = "carousel-icon"; icons.appendChild(icon); if (i == 0) { icon.style.marginLeft = 0; icon.style.backgroundColor = "#E3E3E3"; } (function (i) { icon.onclick = function () { _index = i; _animateAction(); } })(i); _carouselIcons.push(icon); } carousel.appendChild(icons); icons.style.position = "absolute"; icons.style.bottom = "30px"; icons.style.left = "50%"; icons.style.marginLeft = -icons.offsetWidth/2+"px"; // 创建上一张和下一张按钮 var lt = document.createElement("span"), gt = document.createElement("span"); lt.className = "carousel-lt"; gt.className = "carousel-gt"; lt.innerText = "<"; gt.innerText = ">"; lt.style.lineHeight = carousel.offsetHeight + "px"; gt.style.lineHeight = carousel.offsetHeight + "px"; lt.onclick = function () { if (_index == 0) { _index = _imgUrls.length - 1; } else { _index--; } _animateAction(); } gt.onclick = function () { if (_index == _imgUrls.length - 1) { _index = 0; } else { _index++; } _animateAction(); } carousel.appendChild(lt); carousel.appendChild(gt); carouselContent.style.width = carousel.offsetWidth * len + "px"; carousel.appendChild(carouselContent); _carouselContent = carouselContent; _setAnimate(); // 窗口变化时的适配 w.onresize = function () { $(_carouselContent).stop(); _carouselContent.style.marginLeft = -(carousel.offsetWidth) * _index + "px" _carouselContent.style.width = carousel.offsetWidth * _carouselImgs.length + "px"; for (var i = 0, len = _carouselImgs.length; i < len; i++) { _carouselImgs[i].width = carousel.offsetWidth; _carouselImgs[i].height = carousel.offsetHeight; } } }, // 设置动画 _setAnimate = function () { // 自动播放 if (_config.auto) { _intervalId = setInterval(function () { // 最后一张图片 if (_index == _imgUrls.length - 1) { // 是否循环 if (_config.circle) { // 回到第一张 _index = 0; for (var i = 0, len = _carouselImgs.length; i < len; i++) { _carouselImgs[i].style.marginLeft = 0; } } else { clearInterval(_intervalId); } } else { _index++; } // 开始动画 _animateAction(); }, _config.interval) } }, // 开始动画 _animateAction = function () { for (var i = 0, len = _carouselIcons.length; i < len; i++) { _carouselIcons[i].style.backgroundColor = "#000"; } _carouselIcons[_index].style.backgroundColor = "#E3E3E3"; $(_carouselContent).animate({ marginLeft: -(_element.offsetWidth) * _index + "px" }, _config.speed); } _init(); }}) (window,jQuery)
上面最主要的代码是_init，_setAnimate，_animateAction这三个函数，_init函数是把生成DOM节点树，然后插入用户指定的地方。_setAnimate是设置动画，其实就是改变_index这个值。这个值是表示当前是到第几张图片，0表示第一张。_animateAction是设置动画，根据_index值使用animate设置动画。
好了，这只是很简单的轮播代码，下面是html代码
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .carousel { width: 100%; height: 100%; overflow: hidden; position: relative; } .carousel-img { float: left; } .carousel-lt { position: absolute; top: 0; left: 0; width: 30px; height: 100%; text-align: center; font-size: 30px; color: #E3E3E3; cursor: pointer; } .carousel-lt:hover { background: #000; } .carousel-gt { position: absolute; top: 0; right: 0; width: 30px; height: 100%; text-align: center; font-size: 30px; color: #E3E3E3; cursor: pointer; } .carousel-gt:hover { background: #000; } .carousel-icon { width: 20px; height: 20px; background-color: #000; display: inline-block; vertical-align: middle; border-radius: 50%; margin-left: 10px; cursor: pointer; } .active { background-color: #E3E3E3; } </style></head><body> <div id="content" style="width: 100%; height: 500px"> </div> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./carousel.js"></script> <script type="text/javascript"> $(document.getElementById("content")).carousel({ imgUrls: [‘./2.jpg‘,‘./3.jpg‘,‘./4.jpg‘,‘./5.jpg‘] }); </script></body></html>
前端自制Jquery插件————轮播
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。