基于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 编写轮播图插件相关推荐

ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...
jQuery百叶窗轮播图插件
下载地址这款jQuery图片轮播插件提供了多种百叶窗风格的图片切换方式,每一种百叶窗风格都是随机产生的.另外这款jQuery多百叶窗风格切换焦点图插件支持悬浮文字描述,同时也支持自动播放.相信它可以 ...
基于jquery的轮播图组件开发-1
本来是想一口气把功能写完,好吧...结果就是只写了部分小功能,剩下的后续再补上.代码方面分区还有些乱,恩,毕竟写了应该多少有些收获吧. 这里留一份代码: <!doctype html> & ...
一键生成轮播图，轮播图插件
一键生成轮播图,轮播图插件简介写练习的时候发现每次写轮播图都觉得很麻烦,突发奇想,何不写个轮播图插件,需要轮播图的时候,直接调用插件一键生成就行了!!! 于是乎,便写了以下代码(因为博主还是在校学 ...
html5carousel图片轮播,jquery 3d Carousel轮播图插件
jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...
jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
html文字图片一起轮播卡片,简单的堆叠卡片样式jQuery轮播图插件
MxSlider.js是一款堆叠卡片样式的jQuery响应式轮播图插件.该轮播图插件兼容IE8浏览器,采用响应式设计,它在图片切换时,就像一叠扑克牌将最上面一张挪开的效果. 使用方法在页面中引入Mx ...

基于JQuery 编写轮播图插件

基于JQuery 编写轮播图插件

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

使用方法，例子

下载与安装JQuery

jQuery.wdcarousel.js代码

Query.wdcarousel.css样式

基于JQuery 编写轮播图插件相关推荐

最新文章

热门文章