基于JQuery 編寫(xiě)輪播圖插件

不管是實(shí)際開(kāi)發(fā)還是平時(shí)的小項(xiàng)目中 ，頁(yè)面一定有且多個(gè)的輪播圖，那么為了效率大家可以考慮封裝這樣的小插件。下面一起看看他的使用方法吧

使用需要準(zhǔn)備（往下滑動(dòng)會(huì)看到）：

1.jquery官方代碼

2.需要復(fù)制jQuery.wdcarousel.js（這里是基于JQ封裝的代碼）

3.需要復(fù)制jQuery.wdcarousel.css（這里是關(guān)于輪播圖所寫(xiě)大樣式）

以上三個(gè)東西準(zhǔn)備好后下面是使用方法

使用方法，例子

*

// html中寫(xiě)入一個(gè)元素 可以是 class或者id <div class="banner"></div>

**

//復(fù)制 script標(biāo)簽內(nèi)的代碼 //原理：利用對(duì)象傳參的方式 便于代碼的多次重復(fù)使用 //每次使用時(shí)：調(diào)用wdcarousel方法， (暫不支持過(guò)個(gè)元素傳入)<script type="text/javascript">jQuery(function($) {$('.banner').wdcarousel({//必填參數(shù) （css選擇器 選擇元素）ele: '.banner',//必填參數(shù) （css選擇器 選擇元素）width: 1290,//寬height: 500,//高type: 'fade',//輪播樣式 ：horizontal水平無(wú)縫/vertical垂直無(wú)縫/fade淡入淡出page:true,//是否生成頁(yè) 默認(rèn)為truepageNum: true,//是否顯示分頁(yè) 是：true 否：falseseamless: true,//是否選擇無(wú)縫button: true,//是否顯示左右按鈕duration: 3000,//速度//圖片路徑：必填參數(shù)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

• 官網(wǎng)下載
  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){// 創(chuàng)建對(duì)象var Carousel = function(options){// 屬性// 默認(rèn)值let defaults = {ele: '',//必填參數(shù)imgs: [],//必傳參數(shù)// 默認(rèn)寬高width: 810,height: 320,index: 0,page:true,//是否顯示分頁(yè)pageNum:false,button: true,//左右按鈕aaa:true,//數(shù)據(jù)type: 'vertical',//默認(rèn)模式seamless: true,//是否無(wú)縫滾動(dòng)duration:3000 //默認(rèn)輪播間隔時(shí)間}// 擴(kuò)展默認(rèn)函數(shù)this.opt = Object.assign({}, defaults,options);this.len = this.opt.imgs.length;// 用來(lái)區(qū)分無(wú)縫時(shí)的遍歷次數(shù)this.lastNum = 0;// 初始化并傳參數(shù)this.init(this.opt);}// 方法Carousel.prototype.init = function(opt){// 獲取/生成元素// 綁定事件的元素this.ele = document.querySelector(opt.ele);// 指定專(zhuān)有屬性this.ele.classList.add('wd-carousel');// 設(shè)置樣式（寬高）this.ele.style.width = opt.width + 'px';this.ele.style.height = opt.height + 'px';// 生成圖片(ul, li, img)let ul = document.createElement('ul');// 判斷是否需要無(wú)縫if(opt.seamless){// 復(fù)制第一張到最后一張opt.imgs.push(opt.imgs[0]);this.len = opt.imgs.length;this.lastNum = 1;}// 給ul添加類(lèi)型， 設(shè)置輪播類(lèi)型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';}// 寫(xiě)入頁(yè)面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);// 分頁(yè)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');// 往頁(yè)碼中寫(xiě)數(shù)字if(opt.pageNum){span.innerText = i + 1;}// 高亮頁(yè)碼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);} //傳遞參數(shù)this.ul = ul;// 初始化// 頁(yè)面進(jìn)入自動(dòng)輪播this.timer = setInterval(this.autoPlay.bind(this), opt.duration);this.play();// 鼠標(biāo)移入移除效果this.ele.onmouseover = () => {this.stop();}this.ele.onmouseout = () => {this.timer = setInterval(this.autoPlay.bind(this), opt.duration);}// 點(diǎn)擊分頁(yè)切換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;// 到達(dá)最后一張后，重置到第一張if(opt.index >= this.len){// 無(wú)縫時(shí) 直接跳轉(zhuǎn) 無(wú)動(dòng)畫(huà)效果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});}// 頁(yè)碼高亮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 = '';}}// 只無(wú)縫時(shí)執(zhí)行if(opt.seamless&&opt.index === this.len -1){// 當(dāng)滾動(dòng)到最后一張的時(shí)候 頁(yè)面高亮第一張this.page.children[0].className = 'active';}}}// 停止Carousel.prototype.stop = function(){clearInterval(this.timer);}// 實(shí)例化傳進(jìn)來(lái)的對(duì)象new Carousel(obj)}// 原生JS /*** [獲取元素的非內(nèi)聯(lián)樣式]* @param {[element]} ele [元素]* @param {[String]} attr [查找的樣式屬性]* @return {[String]} [返回attr對(duì)應(yīng)的屬性值]*/ 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 /*** 動(dòng)畫(huà)函數(shù)* @param {[Element]} ele [動(dòng)畫(huà)元素]* @param {[Object]} opt [動(dòng)畫(huà)屬性與目標(biāo)值]* @param {Function} callback [回調(diào)函數(shù)]*/ function animate(ele, opt, callback){// 使用屬性timerLen記錄定時(shí)器數(shù)量ele.timerLen = 0;for(var attr in opt){ele.timerLen++;(function(attr){// 防止同名定時(shí)器覆蓋var timerName = attr + 'Timer';var target = opt[attr];// 添加前先清除同名定時(shí)器clearInterval(ele[timerName]);ele[timerName] = setInterval(function(){// 獲取當(dāng)前值var current = getCss(ele, attr);//提取單位 var unit = current.match(/[a-z]*$/)[0];// 提取當(dāng)前值current = parseFloat(current);// 計(jì)算緩沖速度var speed = (target - current)/10;// 針對(duì)opacity屬性操作if(attr === 'opacity'){speed = speed>0? 0.05 : -0.05; }else{// 避免speed 過(guò)小speed = speed>0? Math.ceil(speed) : Math.floor(speed);}current = current + speed;// 目標(biāo)判斷if(current === target){clearInterval(ele[timerName]);// 重置當(dāng)前值current = target;ele.timerLen--;// 完成動(dòng)畫(huà)后執(zhí)行回調(diào)函數(shù)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; }/*水平移動(dòng)*/.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; }

好啦 以上就是代碼的分享 ，使用過(guò)程中有任何問(wèn)題歡迎留言 ，比心?

總結(jié)

以上是生活随笔為你收集整理的基于JQuery 编写轮播图插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。