2. 程式人生 > >js原生輪播圖，支援移動端

js原生輪播圖，支援移動端

阿新 • • 發佈：2019-01-25
window.onload = function(){ var container = document.getElementById('container'); var list = document.getElementById('list'); var buttons = document.getElementById('buttons'); var buttonsItem = buttons.getElementsByTagName('span'); var prev = document.getElementById('prev'
); var next = document.getElementById('next'); var index = 0; var startX = 0; var endX = 0; container.addEventListener('touchend',function(event){ if(event.changedTouches.length==1&&this.getAttribute('disabled')!='disabled'){ var touch = event.changedTouches[0
]; endX = touch.pageX; var offset = endX-startX; console.log(offset); if(Math.abs(offset)>=50){ if(offset<0){// 右滑 nextMethod(); }else{ prevMethod(); } } } }); container.addEventListener('touchmove'
,function(){ event.preventDefault(); }) container.addEventListener('touchstart',function(event){ if(event.targetTouches.length==1&&this.getAttribute('disabled')!='disabled'){ var touch = event.targetTouches[0]; startX = touch.pageX; } }) prev.addEventListener('click',function(){ if (this.getAttribute('disabled')=='disabled') { return false; } prevMethod(); }); next.addEventListener('click',function(){ if (this.getAttribute('disabled')=='disabled') { return false; } nextMethod(); }); for(var i=0;i<buttonsItem.length;i++){ buttonsItem[i].onclick = function(){ if (this.getAttribute('disabled')=='disabled') { return false; } var i = this.getAttribute('index'); var length = Math.abs((i-index)*500); var direction = 'right'; if (length<0) { direction = 'left'; } index = i; document.getElementsByClassName('on')[0].setAttribute('class',''); buttonsItem[index].className = 'on'; animate(direction,1,length); } } function prevMethod(){ if(index==0){ index = 4; animate('right',40,2000); }else{ index--; animate('left',1,500); } document.getElementsByClassName('on')[0].setAttribute('class',''); // buttonsItem[index].setAttribute('class','on'); buttonsItem[index].className = 'on'; } function nextMethod(){ if(index==4){ index = 0; animate('left',40,2000); }else{ index++; animate('right',1,500); } document.getElementsByClassName('on')[0].setAttribute('class',''); buttonsItem[index].className = 'on'; } function animate(direction,speed,length){ var end = length/speed; var count = 0; for(var i=0;i<end;i++){ setTimeout(function(){ count++; var left = list.offsetLeft; if (direction=='right') { left -= speed; }else{ left += speed; } list.style.left = left+'px'; if(count<end-1){ disabledButtons(); }else{ resumeButtons(); } },speed*i); } } function disabledButtons(){ for(var i=0;i<5;i++){ buttonsItem[i].setAttribute('disabled','disabled'); } prev.setAttribute('disabled','disabled'); next.setAttribute('disabled','disabled'); container.setAttribute('disabled','disabled'); } function resumeButtons(){ for(var i=0;i<5;i++){ buttonsItem[i].removeAttribute('disabled'); } prev.removeAttribute('disabled'); next.removeAttribute('disabled'); container.removeAttribute('disabled'); } }

相關推薦

js原生輪播圖，支援移動端

window.onload = function(){ var container = document.getElementById('container'); var list = document.getElementById('list'); var bu

原生js實現淘寶輪播圖，支援左右和跳轉（滑鼠點多快都不會亂）。

用transform是因為這個比left的效能好。 這個是演示網址（不要直接存下來哦）：https://shalltears.github.io/test-sowing-map/ 。 這個是完整程式碼下載地址，覺得還行的下載支援一下：https://download.csdn.ne

JS原生輪播圖

val set blog html gin adding 部分 原生 left 哈嘍！我的朋友們，最近有一個新項目。所以一直沒更新！有沒有想我啊！！ 今天咱們來說一下JS原生輪播圖！ 話不多說： 直接來代碼吧：下面是CSS部分： 1 *{ 2

JS原生輪播圖實現

作為一個PHP全棧攻城獅，不僅要會後端PHP和資料庫，還要會前端JS。今天原始碼時代 PHP培訓 學科老師要和大家分享一下JS原生編寫輪播圖的外掛。 說起輪播圖，很多人會選擇使用各種外掛，比如基於JQuery或其它框架的。不瞞大家，我也用過，甚至還用過Flash的輪播圖。總體來說，用起來是比較簡

JS原生輪播圖方法及技巧

主要涉及知識點，元素的獲取，計時器，開關鎖，速度位子的變化 1.設計思路 輪播圖設計思路，控制ul在一定時間內，向右移動一個 li 寬度的距離，從而展示相應 li 的圖片內容，當移動到最後一個li時，迅速讓其座標歸0，從新開始迴圈。 新增向左或向右按鈕，繫結點選按鈕

JS原生輪播圖程式碼

佈局一個這樣的輪播圖 難點在於圖4與圖1怎麼實現無縫輪播,巧妙的是把圖1插入圖4後面 12341...程式碼如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

用原生js封裝輪播圖

round this getc 行間樣式 gets -m ++ fun ted 原生js封裝輪播圖 對於初學js的同學來說，輪播圖還是一個難點，尤其是原生js封裝輪播圖代碼，下面是我之前做的一個輪播圖項目中封裝好的一些代碼，有需要的同學可以看一下，有什麽不懂的可以看註釋，

JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）

頁面 span one align 數據校驗 lse 格式 用戶輸入 ade 1.數據校驗 步驟 1.確定事件（onsubmit）並綁定一個函數 2.書寫這個函數，獲取數據，並綁定id

原生js實現輪播圖原理分析

一、輪播圖需求 輪播圖需要實現左右翻頁的無縫連線 需要點選左右切換 需要實現跳轉 顯示當前位置的小圓點 二、輪播圖的原理 1.圖片移動實現原理： 利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱

授人以漁式解析原生JS寫輪播圖

需求與分析 需求：迴圈無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，滑鼠點選輪播圖下面按鈕 1 2 3 4 5會跳轉到對應的第1 2 3 4 5張圖片。滑鼠放到輪播圖的圖片上時不再自動輪播並且左右箭頭顯示出來，滑鼠移開時左右箭頭隱藏掉並且自動輪播。 效果圖： 分析： 佈局：準備七張圖片

原生js實現輪播圖原理

輪播圖的原理1.圖片移動實現原理：利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱藏起來。對圖片新增絕對定位，通過控制left屬性，實現照片的移動。 2.圖片移動動畫原理：從a位置移動到b位置，需要先計算兩點之間的差值，通過差值和時間間隔，計算出每次移動的步

使用原生js實現輪播圖效果

這幾天在逛網站的時候，發現很多網站都有輪播圖這個效果，所以我就仿照小米的官網用原生js寫了一個輪播圖效果，希望大家喜歡。 這是我釋出在github上的最後實現的效果：https://heternally.github.io/banner/ 下面我簡單跟大家說一下

用原生js實現輪播圖

今天分享一下簡單的輪播圖製作過程，用原生js實現。雖然網上有各種外掛製作的高大上又好用的輪播圖，但還是要清楚它的基本原理。 1.基本原理 將所有圖片並排放到一個div中，然後再放到展示視窗當中，讓裝有所有圖片的div通過改變left值，從而左右移動實現圖片切換。 2.htm

原生JS實現輪播圖1---勻速動畫

                                JS實現輪播圖 專案實現結果圖： 需求：1 根據圖片動態新增小圓點            2 目標移動到小圓點輪播圖片            3 滑鼠離開圖片，定時輪播圖片；滑鼠在圖片上時暫

利用原生js實現輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js原生輪播圖</title> <style type="text

animate動畫、原生JS實現輪播圖

寫在前面 最近在寫專案的時候，才發現自己對css3這部分的內容已經生疏了，複習css3的時候，看到animate屬性，就用其寫了個焦點輪播圖，當然自己也用原生JS碼了個，當然css3動畫無疑是錦上添花，還是要多總結啊，原始碼我們會在最後附上git地址，好了，下

原生JS實現輪播圖的幾種方式

I 絕對定位+透明度 原理：首先，將所有輪播圖以絕對定位的方式定位父元素的相同位置；接著，實現上下鍵按鈕修改active的下標；最後，將所有圖片透明度重置為0，而被啟用的圖片透明度設定為1； 優點：實現最為簡單，程式碼量小，圖片過渡自然； 缺點：沒有左右滑

js特效-無縫輪播圖，簡單上手

首先，讓大家看效果： 然後給大家介紹一下無縫輪播圖的原理 1.我們在一個ul中會使用很多的li，每一個li中嵌入一個圖片，如果把輪播圖比喻成慢視訊的話，每一張圖片就是一幀(注意:很多新手會認為一些圖

原生JS實現輪播圖

要求： 在和上一任務同一目錄下面建立一個task0002_3.html檔案，在js目錄中建立task0002_3.js，並在其中編碼，實現一個輪播圖的功能。 圖片數量及URL均在HTML中寫好 可以配置輪播的順序（正序、逆序）、是否迴圈、間隔時長 圖片切換的