基于JQuery 编写轮播图插件

不管是实际开发还是平时的小项目中 ，页面一定有且多个的轮播图，那么为了效率大家可以考虑封装这样的小插件。下面一起看看他的使用方法吧

使用需要准备（往下滑动会看到）：

1.jquery官方代码

2.需要复制jQuery.wdcarousel.js（这里是基于JQ封装的代码）

3.需要复制jQuery.wdcarousel.css（这里是关于轮播图所写大样式）

以上三个东西准备好后下面是使用方法

使用方法，例子

*

// html中写入一个元素 可以是 class或者id <div class="banner"></div>

**

//复制 script标签内的代码 //原理：利用对象传参的方式 便于代码的多次重复使用 //每次使用时：调用wdcarousel方法， (暂不支持过个元素传入)<script type="text/javascript">jQuery(function($) {$('.banner').wdcarousel({//必填参数 （css选择器 选择元素）ele: '.banner',//必填参数 （css选择器 选择元素）width: 1290,//宽height: 500,//高type: 'fade',//轮播样式 ：horizontal水平无缝/vertical垂直无缝/fade淡入淡出page:true,//是否生成页 默认为truepageNum: true,//是否显示分页 是：true 否：falseseamless: true,//是否选择无缝button: true,//是否显示左右按钮duration: 3000,//速度//图片路径：必填参数imgs: ["src/img/banner1.jpg","src/img/banner2.jpg","src/img/banner3.jpg","src/img/banner4.jpg","src/img/banner5.jpg","src/img/banner6.jpg","src/img/banner7.jpg",]});})</script>

“下面是需要的js代码与css代码”

下载与安装JQuery

• 官网下载
  http://jquery.com/download/
• CDN
  
  • https://code.jquery.com/jquery-3.0.0.js
  • https://code.jquery.com/jquery-3.0.0.min.js

jQuery.wdcarousel.js代码

下面是jQuery.wdcarousel.js的代码

;(function($){jQuery.prototype.wdcarousel = function(obj){// 创建对象var Carousel = function(options){// 属性// 默认值let defaults = {ele: '',//必填参数imgs: [],//必传参数// 默认宽高width: 810,height: 320,index: 0,page:true,//是否显示分页pageNum:false,button: true,//左右按钮aaa:true,//数据type: 'vertical',//默认模式seamless: true,//是否无缝滚动duration:3000 //默认轮播间隔时间}// 扩展默认函数this.opt = Object.assign({}, defaults,options);this.len = this.opt.imgs.length;// 用来区分无缝时的遍历次数this.lastNum = 0;// 初始化并传参数this.init(this.opt);}// 方法Carousel.prototype.init = function(opt){// 获取/生成元素// 绑定事件的元素this.ele = document.querySelector(opt.ele);// 指定专有属性this.ele.classList.add('wd-carousel');// 设置样式（宽高）this.ele.style.width = opt.width + 'px';this.ele.style.height = opt.height + 'px';// 生成图片(ul, li, img)let ul = document.createElement('ul');// 判断是否需要无缝if(opt.seamless){// 复制第一张到最后一张opt.imgs.push(opt.imgs[0]);this.len = opt.imgs.length;this.lastNum = 1;}// 给ul添加类型， 设置轮播类型ul.classList.add(opt.type);//horizontal,vertical,fade// 水平轮播图需要给ul加宽度if(opt.type === 'horizontal'){ul.style.width = opt.width * this.len + 'px';}else if(opt.type === 'fade'){ul.style.width = opt.width + 'px';ul.style.height = opt.height + 'px';}// 写入页面ul.innerHTML = opt.imgs.map(url => {return '<li><a href="#"><img src="'+url+'" width="'+opt.width+'" height="'+opt.height+'"></a></li>';}).join('');this.ele.appendChild(ul);// 分页if(opt.page){this.page = document.createElement('div');this.page.className = 'page';for(var i = 0; i < this.len - this.lastNum; i++){var span =document.createElement('span');// 往页码中写数字if(opt.pageNum){span.innerText = i + 1;}// 高亮页码if(i === opt.index){span.className = 'active';}this.page.appendChild(span);}this.ele.appendChild(this.page);}// 左右按钮if(opt.button){let btnPrev = document.createElement('span');btnPrev.className = 'btn-prev';btnPrev.innerHTML = '&lt';let btnNext = document.createElement('span');btnNext.className = 'btn-next';btnNext.innerHTML = '&gt';this.ele.appendChild(btnPrev);this.ele.appendChild(btnNext);} //传递参数this.ul = ul;// 初始化// 页面进入自动轮播this.timer = setInterval(this.autoPlay.bind(this), opt.duration);this.play();// 鼠标移入移除效果this.ele.onmouseover = () => {this.stop();}this.ele.onmouseout = () => {this.timer = setInterval(this.autoPlay.bind(this), opt.duration);}// 点击分页切换this.ele.onclick = e => {if(e.target.parentNode.className === 'page'){opt.index = e.target.innerText - 1;this.play();}else if(e.target.className === 'btn-prev'){opt.index--;this.play();}else if(e.target.className === 'btn-next'){opt.index++;this.play();}}}Carousel.prototype.autoPlay = function(){this.opt.index++;this.play();}// 播放Carousel.prototype.play = function(){let opt = this.opt;// 到达最后一张后，重置到第一张if(opt.index >= this.len){// 无缝时 直接跳转 无动画效果if(opt.seamless){this.ul.style.left = 0;}opt.index = this.lastNum;}else if(opt.index < 0){opt.index = this.len - 1 }var obj = {};// 水平if(opt.type === 'horizontal'){obj.left = -opt.index * opt.width;animate(this.ul, obj);}else if(opt.type === 'vertical'){obj.top = -opt.index * opt.height;animate(this.ul, obj);}else if(opt.type === 'fade'){for(var i = 0; i < this.len; i++){animate(this.ul.children[i], {opacity:0});}animate(this.ul.children[opt.index], {opacity:1});}// 页码高亮if(this.page){for(var i = 0; i < this.len - this.lastNum; i++){if(i === opt.index){this.page.children[i].className = 'active';}else{this.page.children[i].className = '';}}// 只无缝时执行if(opt.seamless&&opt.index === this.len -1){// 当滚动到最后一张的时候 页面高亮第一张this.page.children[0].className = 'active';}}}// 停止Carousel.prototype.stop = function(){clearInterval(this.timer);}// 实例化传进来的对象new Carousel(obj)}// 原生JS /*** [获取元素的非内联样式]* @param {[element]} ele [元素]* @param {[String]} attr [查找的样式属性]* @return {[String]} [返回attr对应的属性值]*/ function getCss(ele,attr){var res;if(getComputedStyle){res = getComputedStyle(ele)[attr];}else if(ele.currentStyle){res = ele.currentStyle[attr];}else{res = ele.style[attr];}return res; } // 缓冲效果 原生JS /*** 动画函数* @param {[Element]} ele [动画元素]* @param {[Object]} opt [动画属性与目标值]* @param {Function} callback [回调函数]*/ function animate(ele, opt, callback){// 使用属性timerLen记录定时器数量ele.timerLen = 0;for(var attr in opt){ele.timerLen++;(function(attr){// 防止同名定时器覆盖var timerName = attr + 'Timer';var target = opt[attr];// 添加前先清除同名定时器clearInterval(ele[timerName]);ele[timerName] = setInterval(function(){// 获取当前值var current = getCss(ele, attr);//提取单位 var unit = current.match(/[a-z]*$/)[0];// 提取当前值current = parseFloat(current);// 计算缓冲速度var speed = (target - current)/10;// 针对opacity属性操作if(attr === 'opacity'){speed = speed>0? 0.05 : -0.05; }else{// 避免speed 过小speed = speed>0? Math.ceil(speed) : Math.floor(speed);}current = current + speed;// 目标判断if(current === target){clearInterval(ele[timerName]);// 重置当前值current = target;ele.timerLen--;// 完成动画后执行回调函数if(typeof callback === 'function' && ele.timerLen === 0){callback();}}ele.style[attr] = current + unit;}, 40)})(attr);} }})(jQuery);

Query.wdcarousel.css样式

ul {list-style: none;padding: 0;margin: 0; }.wd-carousel img {display: block; }.wd-carousel {position: relative;width: 810px;height: 320px;overflow: hidden; }.wd-carousel ul {position: absolute;overflow: hidden; }/*水平移动*/.wd-carousel ul.horizontal li {float: left; }/*淡入淡出*/.wd-carousel ul.fade li {position: absolute;left: 0;top: 0; }.wd-carousel .page {position: absolute;right: 0;bottom: 0;padding: 8px; }.wd-carousel .page span {font-size: 0;display: inline-block;margin: 0 5px;width: 10px;height: 10px;line-height: 20px;background-color: rgba(255, 255, 255, .5);text-align: center;color: #eee;border-radius: 50%;box-shadow: 0 0 10px rgba(0, 0, 0, .6); }.wd-carousel .page span.active {background-color: red; }.wd-carousel>span {display: none;position: absolute;left: 0;top: 50%;transform: translate(0, -50%);padding: 50px 16px;background-color: rgba(204, 204, 204, 0.4);color: #eee; }.wd-carousel .btn-next {left: auto;right: 0; }.wd-carousel>span:hover {background-color: rgba(102, 102, 102, 0.4); }.wd-carousel:hover>span {display: block; }

好啦 以上就是代码的分享 ，使用过程中有任何问题欢迎留言 ，比心❤

总结

以上是生活随笔为你收集整理的基于JQuery 编写轮播图插件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。