基于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 编写轮播图插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。