2. 程式人生 > >封裝一個簡單的banner輪播外掛

封裝一個簡單的banner輪播外掛

阿新 • • 發佈：2019-01-24
;(function (win, $) { var banner = function (obj) { this.bannerBox = $(obj); this.listBox = this.bannerBox.find('.list'); this.list = this.bannerBox.find('.list li'); this.prevBtn = this.bannerBox.find('.prev'); this.nextBtn = this
.bannerBox.find('.next'); this.pages = this.bannerBox.find('.banner-pages span'); this.index = 0; this.len = this.list.length; this.timer = null; this.isClicked = false; this.cloneOneToLast = this.list.eq(0).clone(); this
.cloneOneToLast.appendTo(this.listBox); this.nextBtnClickEvent(); this.prevBtnClickEvent(); this.pagesClickEvent(); this.bannerBoxHoverEvent(); this.autoPlay(); }; $.extend(true, banner.prototype, { runByIndex: function
() { var _this = this; this.pages.removeClass('on'); if (this.index == this.len || this.index == 0) { this.pages.eq(0).addClass('on') } else { this.pages.eq(this.index).addClass('on'); } this.listBox.animate({left: -this.index * 100 + '%'}, 500, function () { _this.isClicked = false; }); }, autoPlay: function () { var _this = this; _this.stopRun(); _this.timer = setInterval(function () { _this.nextRun(); }, 3000); }, stopRun: function () { if (this.timer) { win.clearInterval(this.timer); } }, nextRun: function () { if (this.index > this.len - 1) { this.index = 0; this.listBox.css('left', -this.index * 100 + '%'); } this.index++; this.runByIndex(); }, prevRun: function () { if (this.index < 1) { this.index = this.len; this.listBox.css('left', -this.index * 100 + '%'); } this.index--; this.runByIndex(); }, bannerBoxHoverEvent: function () { var _this = this; _this.bannerBox.hover(function () { _this.stopRun(); }, function () { _this.autoPlay(); }); }, pagesClickEvent: function () { var _this = this; _this.pages.click(function () { if (!_this.isClicked) { _this.index = $(this).index(); _this.runByIndex(); } }); }, prevBtnClickEvent: function () { var _this = this; _this.prevBtn.click(function () { if (!_this.isClicked) { _this.isClicked = true; _this.prevRun(); } }); }, nextBtnClickEvent: function () { var _this = this; _this.nextBtn.click(function () { if (!_this.isClicked) { _this.isClicked = true; _this.nextRun(); } }); } }); banner.init = function (obj) { for (var i = 0, len = obj.length; i < len; i++) { new this(obj[i]); } }; win.MySelfBanner = banner; })(window, $); //例項化外掛 MySelfBanner.init($('.banner-box'));

相關推薦

封裝一個簡單的banner輪播外掛

;(function (win, $) { var banner = function (obj) { this.bannerBox = $(obj); this.listBox = this.bannerBox.find('.list

用Vue實現一個簡單的輪播效果

Vue實現簡單的輪播效果，用的的一些常用系統指令： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

JS實現一個簡單的輪播圖

主要程式碼如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

Bootstrap寫出一個簡單的輪播圖。

輪播圖：1.建立一個div把輪播圖裝起來，然後class裡面寫.carousel .slide 然後隨便建立一個id #banner；再次添加個屬性data-ride="carousel"<div class="carousel slide" id=" banner"&

封裝一個無縫圖片輪播元件

圖片輪播在我們的前端開發中是非常常見的，下面是自己寫的一個圖片輪播元件，支援自動輪播，手動輪播，無縫銜接。dom結構首先是dom結構，將所有內容放入一個大盒子，應用ul標籤存放圖片列表，圓點定點陣圖片位置。                 <div id="box"&g

vue2.0實現一個簡單的輪播圖

因為之前一直在忙公司的專案，vue這塊就生疏了不少，正好借這個小demo複習下vue的知識。 先來個效果圖： 如圖所示，實現的就是一個間隔2.5s自動向左切換下一張的輪播圖，同時滑鼠移入停止輪播，移出回覆輪播； 而下方按鈕會根據當前圖片自動變紅且可以手動控制當前圖片

一個簡單的jquery圖片輪播外掛

前提佈局： 左浮li標籤，支援左右切換，自動輪播，原始碼： 引數：ul： 需要動畫的ul   prev：上一個切換按鈕  next： 下一個切換按鈕function rotation(ul, prev, next) { var li = $(ul).find("li

BGA banner輪播獲取json簡單使用

//先引入BGA 依賴 compile ‘cn.bingoogolapple:bga-banner:[email protected]’ //放輪播的佈局 <?xml version="1.0" encoding="utf-8"?> &l

Banner輪播圖的簡單用法

banner使用步驟 1—新增依賴 compile ‘com.youth.banner:banner:1.4.9’ //最新版本 2.許可權 網路的許可權和讀寫許可權 還有name 3—添加布局 <com.youth.banner.Banner xmlns:app="http

swipe輪播外掛，支援手勢，簡單實用

<section class="recommend-swiper swiper-container">         <div class="swiper-wrapper">             <div class="swiper-slide"><a href

一個原生JS輪播圖外掛的全部實現

前段時間把模組化開發的學習整理了之後就想著做個小外掛。本文記錄個人獨立完成的一個原生JS輪播圖外掛的實現過程。嗯，東西很簡單，大佬勿噴。github求start 涉及知識點： 模組化開發 ES6 JS HTML5和css

封裝一個簡單的UI組件

span query indent block 年份 函數 方法 his prev 　　方法其實很簡單，用一個函數把整個過程包起來。調用時用new，這樣可以在一個頁面使用多個改組件。這是一個非常簡單的方法，後面還有很大改進的空間。下面是一個封裝日歷的示例。 　　現在我們的

如何使用微信小程序制作banner輪播圖？

src tom idt 屬性 mod 隱藏 使用 生命周期 eight 在前端工程師的工作中，banner是必不可少的，那缺少了DOM的小程序是如何實現banner圖的呢?如同其他的框架封裝了不同的banner圖的方法，小程序也封裝了banner的方法，來讓我一一道來：

簡單的輪播圖代碼

jpg ul li hidden ext div ngs obj script proto <html> <script type="text/javascript" src="./jquery.min.js"></script> <

Python之自定義封裝一個簡單的Log類

實例對象 級別 port detail 問題 文件夾 相對 alt 腳本 參考：http://www.jb51.net/article/42626.htm 參考：http://blog.csdn.net/u011541946/article/details/70198676

js實現簡單的輪播效果

utf int ack load blog 輪播 HA 實現簡單 interval <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

簡單的輪播

AI class tar nbsp aid 圖片輪播 簡單 lzw targe 文字輪播：https://pan.baidu.com/s/1lWf9b7YpvMVXcT5wXOGn0g 圖片輪播：https://pan.baidu.com/s/1N-kvCpTeAQ86ZL

jQuery實現簡單的輪播圖

jQuery先看效果，如果是你想要的，可以看看總體思路： 1.自動輪播2.指定輪播3.左右翻動 詳細步驟：jQuery部分 設置第一張圖片顯示，其他的兄弟元素隱藏 自動輪播的時候，指定第一張的索引為 i=0，然後 i++, 使其對應的 i 索引的圖片顯示，其他的隱藏，當 i=5（即第六張圖片的時候，使其為

jq做的簡單的輪播

定時器 bsp () 定時器對象 下標 length idt set button <button id="aa">上一頁</button><img src="../1.png" height="200px" width="150

程式碼改變世界 | 如何封裝一個簡單的 Koa

下面給大家帶來：封裝一個簡單的 KoaKoa 是基於 Node.js 平臺的下一代 web 開發框架Koa 是一個新的 web 框架，可以快速而愉快地編寫服務端應用程式，本文將跟大家一起學習：封裝一個簡單的 Koa一個簡單的 http 服務使用 node 提供的 http 模組，可以很容易的實現一個基本的 h