短視訊直播系統,js利用建構函式封裝輪播圖
短視訊直播系統,js利用建構函式封裝輪播圖實現的相關程式碼
html
<div> <ul> <li><img src="images/1.webp" alt=""></li> <li><img src="images/2.webp" alt=""></li> <li><img src="images/3.webp" alt=""></li> <li><img src="images/4.webp" alt=""></li> </ul> <span class="iconfont left"></span> <span class="iconfont right"></span> </div>
css
* { margin: 0; padding: 0; } @font-face { font-family: "iconfont"; src: url('./font/iconfont.ttf') format('truetype') } .iconfont { font-family: "iconfont" !important; font-size: 30px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } li { list-style: none; } img { width: 500px; height: 260px; } ul { position: relative; width: 2000px; display: flex; transition: all 1000ms; } div { position: relative; margin: 50px auto; width: 500px; overflow: hidden; } ol { position: relative; bottom: 30px; left: 30%; display: flex; } ol li { width: 15px; height: 15px; margin-right: 40px; background-color: rgba(0, 0, 0, 0.479); border-radius: 100%; } span { position: absolute; top: calc(50% - 20px); width: 30px; height: 30px; line-height: 30px; text-align: center; background-color: rgba(0, 0, 0, 0.301); color: #fafafa; cursor: pointer; } .left { font-size: 26px; } .right { right: 0; }
js
function SlideShow() { this.ul = document.querySelector('ul'); this.lis = document.querySelectorAll('ul li'); this.div = document.querySelector('div'); this.left = document.querySelector('.left'); this.right = document.querySelector('.right'); this.init(); } //初始化 SlideShow.prototype.init = function() { n = 0; _this = this; this.dot(); this.autoplay(); this.arrow(); this.pause(); } //自動播放 SlideShow.prototype.autoplay = function() { timer = null; var newLis = document.querySelectorAll('ol li'); timer = setInterval(() => { n++; n = n == 4 ? 0 : n; if (newLis.length != 0) { newLis.forEach(value => value.style.backgroundColor = '') newLis[n].style.backgroundColor = '#fff' } this.ul.style.marginLeft = -500 * n + 'px'; }, 2000); } //是否生成導航圓點 SlideShow.prototype.dot = function() { var ol = document.createElement('ol'); this.div.appendChild(ol); this.lis.forEach(item => ol.appendChild(document.createElement('li'))); var newLis = document.querySelectorAll('ol li'); newLis[0].style.backgroundColor = '#fff'; for (var i = 0; i < newLis.length; i++) { (function(i) { newLis[i].onclick = function() { newLis.forEach(value => value.style.backgroundColor = ''); newLis[i].style.backgroundColor = '#fff'; _this.ul.style.marginLeft = -500 * i + 'px'; return n = i; } })(i) } } //箭頭 SlideShow.prototype.arrow = function() { var newLis = document.querySelectorAll('ol li'); this.left.onclick = function() { clearInterval(timer); n = n == 0 ? 3 : --n; _this.ul.style.marginLeft = -500 * n + 'px'; if (newLis.length != 0) { newLis.forEach(value => value.style.backgroundColor = ''); newLis[n].style.backgroundColor = '#fff'; } } this.right.onclick = function() { clearInterval(timer); n = n == 3 ? 0 : ++n; _this.ul.style.marginLeft = -500 * n + 'px'; if (newLis.length != 0) { newLis.forEach(value => value.style.backgroundColor = ''); newLis[n].style.backgroundColor = '#fff'; } } } //暫停 SlideShow.prototype.pause = function() { this.div.onmouseenter = function() { clearInterval(timer); } this.div.onmouseleave = function() { _this.autoplay(); } } var sli = new SlideShow();
以上就是 短視訊直播系統,js利用建構函式封裝輪播圖實現的相關程式碼,更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2850953/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 短視訊直播系統開發直播短視訊程式搭建短視訊互動直播
- 短影片直播系統,Android卡片式輪播Android
- 直播短視訊原始碼短視訊APP短視訊帶貨系統多商戶直播原始碼APP
- js中用oop思想封裝輪播JSOOP封裝
- 如何使用JQ封裝輪播圖封裝
- 短視訊商城原始碼,首頁輪播圖佈局管理原始碼
- Flutter 封裝一個 Banner 輪播圖Flutter封裝
- 短視訊商城原始碼,三種常見的輪播圖效果原始碼
- 利用回撥函式實現簡單的輪播圖效果函式
- Flutter 如何封裝一個 Banner 輪播圖?Flutter封裝
- Vue封裝Swiper實現圖片輪播Vue封裝
- 一對一直播系統原始碼,軟體首頁輪播圖輪播效果原始碼
- 短視訊軟體開發,實現簡單的輪播圖效果
- php短視訊原始碼,jQuery實現自定義輪播圖外掛PHP原始碼jQuery
- 短視訊直播系統原生系統原生APP雙端APP
- 線上直播系統原始碼,利用css和html實現首頁圖片輪播效果原始碼CSSHTML
- 短視訊平臺搭建,淡入淡出 支援左滑右滑輪播圖
- 直播商城系統APP帶貨系統短視訊帶貨系統APP
- 常用js函式封裝JS函式封裝
- js 輪播圖 (原生)JS
- 短視訊app製作,各個程式裡常見的首頁輪播圖APP
- 短視訊直播系統,個人主頁背景圖片自適應寬高
- JSONP 通用函式封裝JSON函式封裝
- js實現輪播圖JS
- Swift - 常用輪播圖封裝,滿足你的日常需求Swift封裝
- 短視訊直播系統,動態內的圖片實現長按儲存
- 利用nginx搭建RTMP視訊點播、直播、HLS伺服器Nginx伺服器
- 直播商城系統:帶貨APP+短視訊+直播+商城+多商戶appAPP
- 原生js實現輪播圖JS
- 利用IPFS構建短視訊區塊鏈應用開發經歷(十)區塊鏈
- 授人以漁式解析原生JS寫輪播圖JS
- JS 建構函式與類JS函式
- 短視訊直播系統,QLinearGradient之畫漸變線
- 直播平臺原始碼,純JS實現左右滑動輪播圖原始碼JS
- 線上視訊教學線上教育直播程式教育培訓系統線上錄播、回播
- 小紅書短視訊seo引流系統
- 那些年我封裝的 JS 函式封裝JS函式
- 短視訊直播原始碼,自定義圖片或視訊的迴圈播放原始碼