2. 程式人生 > >無限迴圈JavaScript輪播

無限迴圈JavaScript輪播

阿新 • • 發佈：2019-01-13
// 計算總寬度，賦值width和left偏移 & 插入控制點和左右翻頁的箭頭 function Slide(elementId, hasCtrlPoints, isFlip, isAutoPlay) { this.element = elementId; this.slideBox = null; this.shfirstChild = null; this.shlastChild = null; this.boxWidth = 0; this.offsetLeft = 0; this.count = 0; this.ctrlBox = null
; this.intervalId = 0; Slide.prototype.init = function() { this.slideBox = document.getElementById(this.element); if (this.slideBox.childNodes.length > 0) { // 初始化變數 複製兩個節點並插入 無限迴圈滾動使用 this.count = this.slideBox.querySelectorAll('li').length; this.shfirstChild = this
.slideBox.querySelector('li').cloneNode(true); this.shlastChild = this.slideBox.querySelectorAll('li:last-child')[0].cloneNode(true); this.slideBox.appendChild(this.shfirstChild); this.slideBox.insertBefore(this.shlastChild, this.slideBox.firstChild); this.boxWidth = this
.shfirstChild.clientWidth; if (this.boxWidth !== 0 && this.count > 1) { this.slideBox.style.width = this.boxWidth * (this.count + 2) + 'px'; this.offsetLeft = '-' + this.boxWidth + 'px'; this.slideBox.style.left = this.offsetLeft; } else if (this.boxWidth !== 0 && this.count <= 1) { this.slideBox.style.width = this.boxWidth * this.count + 'px'; } } if (hasCtrlPoints) { //新增小點點 var ctrlBox = document.createElement('div'); ctrlBox.className = "ctrlbox"; for (var i = 0; i < this.count; i++) { var ctrlItem = document.createElement('span'); ctrlItem.setAttribute('data-item', i); if (i === 0) ctrlItem.className = "active"; ctrlBox.appendChild(ctrlItem); } this.slideBox.parentNode.appendChild(ctrlBox); this.ctrlBox = this.slideBox.parentNode.querySelector('.ctrlbox'); this.addDotEvent(); } if (isFlip) { // 新增兩邊的翻頁箭頭 var prev = document.createElement('a'), next = document.createElement('a'); prev.className = 'flip prev'; next.className = 'flip next'; this.slideBox.parentNode.appendChild(prev); this.slideBox.parentNode.appendChild(next); this.addFlipEvent(); } if (isAutoPlay) { // 自動翻頁 5秒 this.setAutoPlay(); } }; Slide.prototype.activeCtrl = function(direction) { // 改變點點的狀態 if (this.ctrlBox === null) return; var ctrlItems = this.ctrlBox.querySelectorAll('span'); var indexMark = 0; for (var i = 0; i < ctrlItems.length; i++) { if (ctrlItems.item(i).className === 'active') { ctrlItems.item(i).className = ''; indexMark = i; } } indexMark += direction ? 1 : -1; indexMark = (indexMark === ctrlItems.length) ? 0 : indexMark; indexMark = (indexMark === -1) ? (ctrlItems.length - 1) : indexMark; ctrlItems.item(indexMark).className = 'active'; }; Slide.prototype.goNext = function() { // 向後翻 this.offsetLeft = parseInt(this.offsetLeft) - this.boxWidth + 'px'; this.slideLeft(this.offsetLeft); this.slideBox.className = 'slidebox transition'; if (parseInt(this.offsetLeft) === -this.boxWidth * (this.count + 1)) { var _this = this; setTimeout(function() { _this.slideBox.className += ' nonetransition'; _this.offsetLeft = '-' + _this.boxWidth + 'px'; _this.slideBox.style.left = _this.offsetLeft; }, 380); } this.activeCtrl(true); }; Slide.prototype.goPrev = function() { // 向前翻 this.offsetLeft = parseInt(this.offsetLeft) + this.boxWidth + 'px'; this.slideLeft(this.offsetLeft); this.slideBox.className = 'slidebox transition'; if (parseInt(this.offsetLeft) === this.boxWidth * 0) { var _this = this; setTimeout(function() { _this.slideBox.className += ' nonetransition'; _this.offsetLeft = '-' + (_this.boxWidth * _this.count) + 'px'; _this.slideBox.style.left = _this.offsetLeft; }, 380); } this.activeCtrl(false); }; Slide.prototype.addFlipEvent = function() { // 給箭頭新增事件 var prevBtn = this.slideBox.parentNode.querySelector('.flip.prev'); var nextBtn = this.slideBox.parentNode.querySelector('.flip.next'); var _this = this; nextBtn.addEventListener('click', function(event) { _this.goNext(); if (isAutoPlay) _this.clearIntervalId(); }); prevBtn.addEventListener('click', function(event) { _this.goPrev(); if (isAutoPlay) _this.clearIntervalId(); }); }; Slide.prototype.slideLeft = function(offsetLeft) { this.slideBox.style.left = offsetLeft; }; this.setOffsetLeft = function(offsetLeft) { // 必須在這裡修改變數 事件處理函式的作用域處理不了 this.offsetLeft = offsetLeft; }; this.clearIntervalId = function() { // 點選完畢停止自動播放 5秒後恢復 console.log(this.intervalId); clearInterval(this.intervalId); this.setAutoPlay(); }; this.setAutoPlay = function() { var _this = this; this.intervalId = setInterval(function() { _this.goNext(); }, 5000); }; Slide.prototype.addDotEvent = function() { //給小點點新增事件 if (this.ctrlBox === null) return; var ctrlItems = this.ctrlBox.querySelectorAll('span'); var _this = this; for (var i = 0; i < ctrlItems.length; i++) { ctrlItems.item(i).addEventListener('click', function(event) { var pos = (-(parseInt(event.target.getAttribute('data-item')) + 1) * _this.boxWidth) + 'px'; _this.setOffsetLeft(pos); _this.slideLeft(pos); var siblings = event.target.parentNode.querySelectorAll('span'); for (var i = 0; i < siblings.length; i++) { siblings.item(i).className = ''; } event.target.className = 'active'; }); } }; } window.onload = function() { var shuff = new Slide('topShuff', true, true, true); shuff.init(); }

相關推薦

無限迴圈JavaScript輪播

// 計算總寬度，賦值width和left偏移 & 插入控制點和左右翻頁的箭頭 function Slide(elementId, hasCtrlPoints, isFlip, isAutoPlay) { this.element = elementId; this.slid

javascript-----輪播圖插件

var n) enter ansi doc dom font ati ner 一、效果 1、html代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"

實現頁面公告欄迴圈向上輪播

解決方案 1、 HTML 先建一個div層作為公告顯示區，裡面包裹一個公告列表(ul); ? 1 2

Html5+JavaScript輪播圖實現方式

這…足夠應付大學老師的作業了 /偷笑 這應該是大學JavaScript老師常佈置的js作業之一,只做了三個圖片,可以修改圖片和尺寸,修改好名字之後替換即可,如果要新增第四張圖片所有的px都要修改.一開始就是用三張圖片做的,就沒弄四張照片 圖片自己找吧, 樣式圖

javascript輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript焦點圖</title> <style>

javascript輪播圖演算法

輪播圖，是網站首頁中常見的一種圖片切換特效，作為前端開發者，我相信很多開發者都直接呼叫了Jquery中的封裝好的方法實現圖片輪播，省事簡單。所以我想介紹一下javascript純程式碼實現的圖片輪播。

Viewpager 自動輪播（無限迴圈） ，手動滑動時停止輪播+底部小圓點（二）

專案結構如下： Volley工具類： VolleyTool類負責例項化mRequestQueue和mImageLoader。 package com.example.utils; import android.content.Context; import com

ViewPager輪播圖自動無限迴圈滑動，手指按住停止滑動

ViewPager輪播圖是很常見的功能了,但是專案總是用到,總結下加強記憶. 以下用到的都是再我公司的專案中抽取出來的 1,首先是adapter 這裡有兩點: a,getCount()的返回值是Integer.MAX_VALUE; b,instantiateItem使用到

android的自動播放和偽無限迴圈的廣告輪播實現

這次我們剝離出程式碼， 自定義一個view來簡單化。 原始碼可以在github上找到。 簡單使用說明如下： 1, Application中初始化Fresco public class App extends Applicati

自定義Banner輪播廣告（真*無限迴圈無卡頓&設定切換速度）

前言 Github上有很多輪播廣告的原始碼，比如帶著很酷炫動畫的flashView框架。 不過就學習而已，我建議每個人都應該自己多嘗試著寫一些控制元件。 以下，是我為小白們分享的簡單經驗。 自定義控制元件 先

Android之ViewPager實現圖片無限迴圈輪播

很久沒有寫部落格了，之前花時間寫了一個Viewpager實現的無限圖片輪播，個人感覺還是很好用的QAQ，原始碼和思路都還算清晰 實現的效果圖如下： 這裡要補充一下，在這個專案中我把圖片輪播寫進了一個Viewholder裡內嵌在了Recyclelistview裡。但本文只介

iOS-無限迴圈輪播器(註釋詳細到沒有之一)

Bg: 1)有一段時間沒有寫文章了,最近事兒比較多,今天有人在技術群裡面問我使用UIScrollview實現無限迴圈輪播的思想(3個UIImageView實現),我當時給了他一篇部落格,不過好像這位朋友看的不是很懂,所以我寫了一個小Demo打算寫這篇文章去講解下,幫助有需要的朋友們,所以我儘量把能寫的註釋都

專案的收尾,分享等,輪播圖無限迴圈,即純圖片的介面,三級快取等

# sharesdk分享 * 1、註冊登入，http://mob.com/#/index * 2、進入後臺建立應用，記錄appkey * 3、下載sdk，http://mob.com/#/downloadDetail/ShareSDK/android * 4、開啟Quick

javascript圖片輪播

tel ++ 播放 ont idt images sna -a 取圖 圖片輪播源代碼 復制可用 <!doctype html><html lang="en"><head> <meta charset="UTF-8">

JavaScript實現的輪播圖

n) undefined add tom als one lin 例如 fun 當初學習JavaScript的時候，想學習輪播圖是怎麽寫的，結果在百度搜了半天也很難搜出一個完整的輪播圖案例。現在就分享一個用js寫的輪播圖供大家參考和學習，有什麽錯誤的地方或有更好

studio無限輪播

example save log http stack studio thum cte put <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http:

原生JavaScript實現無縫輪播圖

原生 原生js ted 結束 阻止 time == 實現圖 put 無縫輪播圖是頁面常用的特效之一，然而在實際的開發過程中，大部分的開發者都會使用插件來對輪播圖進行開發，那麽它的底層到底是怎麽實現的呢，本文章將圍繞這一問題展開探討。 在討論如何利用原生JS實現圖片之間無縫切

JavaScript--緩動運動+輪播圖

classname ima javascrip ive margin pla tom append mouse 上效果： 實現步驟： 最重要的是運動公式！！！ 1 <!DOCTYPE html> 2 <html> 3 &

【前端】javascript實現帶有子菜單和控件的輪播圖slider

style creat radius .get abs weight col 技術分享 city 實現效果： 實現原理： // 步驟 // 1. 獲取事件源以及相關元素 // 2. 復制第一張圖片所在的li，添加到ul的最後面 // 3. 給ol添加li，ul中的個數-

【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider

pad 語句 borde nbsp strong 調用 define ide right 實現效果： 實現原理： 技術棧: javascript+jQuery+html+css 實現步驟： // 0. 獲取元素 // 1. 鼠標放置到輪播圖上，顯示兩側的