javascript實現移動端輪播圖
本文實例為大家分享了js實現移動端輪播圖的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <link rel='stylesheet' href='http://www.leifengta.com.cn/bcjs/yidong.css' ></head><body> <!-- 頁頭 --> <button class='open'>打開app</button> <div style='display: flex; justify-content: center; background-color: rgb(28, 151, 141);width: 100%; height: 0.8rem;'><div style='display:inline-block; font-size: 0.4rem;'><p style='font-size: 0.55rem;'>🔆</p> </div><input type='text' style='width: 70%;background-color: rgb(190, 217, 219); font-size: 0.4rem;color: rgb(81, 82, 81);'> <input type='submit' value='🔍' style='width: 10%;font-size: 0.5rem;'></div> <div data-ride='carousel'> <!-- 輪播圖部分 --> <div class='lunbo'> <ul class='lul'> <li> <a href='http://www.leifengta.com.cn/bcjs/14270.html'> <img src='http://www.leifengta.com.cn/bcjs/img/1.png' alt=''> </a> </li> <li > <a href='http://www.leifengta.com.cn/bcjs/14270.html'> <img src='http://www.leifengta.com.cn/bcjs/img/2.png' alt=''> </a> </li> <li > <a href='http://www.leifengta.com.cn/bcjs/14270.html'> <img src='http://www.leifengta.com.cn/bcjs/img/3.png' alt=''> </a> </li> </ul> </div></body></html>
js：
<script src='http://www.leifengta.com.cn/bcjs/rem.js'></script><script> //設置動態的css樣式 var lunbo =document.querySelector(’.lunbo’) var lul=document.querySelector(’.lul’) var fimg =document.querySelectorAll(’li’)[0]; var limg =document.querySelectorAll(’li’)[2];// cloneNode復制一個元素// appendChild() 方法可向節點的子節點列表的末尾添加新的子節點，再最后一張圖片后面添加第一張圖片 lul.appendChild(fimg.cloneNode(true))//在第一張圖片前面添加最后一張圖片 lul.insertBefore(limg.cloneNode(true),lul.firstChild)// 獲取lul下面全部的li var lis= lul.querySelectorAll(’li’) // 獲取li元素的數量var licount = lis.length;// 獲取輪播圖總共的寬度var lwidth = lunbo.offsetWidth;// 設置圖片盒子的寬度lul.style.width=licount*lwidth+’px’;//設置每一個li元素的樣式 給他們定義寬度 他的寬度就等于我們頁面的寬度也就是lunbo的寬度for(i=0;i<lis.length;i++){ lis[i].style.width=lwidth+’px’}//設置偏移距離lul.style.left=-lwidth+’px’// 設置自動輪播// 設置索引(設置索引為1，因為圖片已經偏移了)var index=1// 設置定時器先去封裝他，因為后面要開啟定時器，調用這個函數就行了var time;//要在外面定義time不然后面清除定時器接收不到函數//當手指滑動輪播圖過快的時候后面的輪播圖就不會顯示，因為滑動過快時過度沒有完成就不會觸發webkitTransitionEnd（監聽當元素執行完過度效果）//所以設置一個變量用來控制，（過度效果未完成不能滑動圖片）var con=true var ltime=function(){ time=setInterval(function(){index++// 設置偏移 每次偏移都是以最初的點為參照點點的，所以如果每次都便宜一個width的話圖片就不動lul.style.left=(-index*lwidth)+’px’// 添加過度效果,在最后一張跳到第一張時要清除過度效果所以要加上如果在清除過度后面添加else{ lul.style.transition=’all 1s’}的話因為有個定時器所以不能流暢執行lul.style.transition=’all 1s’setTimeout(function(){ // 判斷是否到最后一張// 當顯示為最后一幢圖片時進行操作，最后一張圖片的索引值為licount-1if(index==licount-1){ index=1;// 偏移到最開始的位置lul.style.left=(-index*lwidth)+’px’//當顯示最后一張的時候會移回去，所以要清除過度效果lul.style.transition=’none’}//如果直接清除過度效果的話最后一張就直接跳過去了，所以讓他延遲一會在進行判斷（跳轉），這就是為什么在最后一張后面要添加第一張圖片了 },1000)},2000) }ltime();//設置觸摸事件// 定義手指的坐標 分為x和yvar sx,sy,mx,my,dis;lul.addEventListener(’touchstart’,function(q){ clearInterval(time); sx=q.targetTouches[0].clientX;})lul.addEventListener(’touchmove’,function(q){ if(con==true){ mx=q.targetTouches[0].clientX; dis=mx-sx; lul.style.left=-index*lwidth+dis+’px’ // 為了使過度效果流暢 去除lul的過渡效果 lul.style.transition=’none’ } })lul.addEventListener(’touchend’,function(){ con=false; // 判斷是否切換圖片 if(Math.abs(dis)>100){//切換圖片 如果手指觸摸滑動的距離超過100進行圖片切換 if(dis>0){//如果偏移值為正數則向下一張偏移（向右滑動） index-- } else{//如果偏移值為負數則向下一張偏移（向左滑動） index++ } //設置輪播圖的最終偏移，添加過度 lul.style.left=-index*lwidth+’px’; lul.style.transition=’all 0.5s’ } else if(Math.abs(dis)>0 ){//確定用戶做出拖拽事件，點一下的話不需要做出相關操作 //設置輪播圖回彈，添加過度效果 lul.style.left=-index*lwidth+’px’; lul.style.transition=’all 0.5s’ }//執行完觸摸事件就可以從新開啟定時器了sx=0;mx=0;dis=0;ltime()})//解決輪播圖劃到第一張或者最后一張時沒有圖片//添加 webkitTransitionEnd 事件，webkitTransitionEnd事件是監聽當元素執行完過度效果 lul.addEventListener(’webkitTransitionEnd’,function(){con=trueif(index==licount-1){//當滑動到最后一個圖片時展示的是倒數第二張圖片讓圖片展示的為第一張 index=1;//index時從0開始的 lul.style.left=-index*lwidth+’px’; lul.style.transition=’none’ }else if(index==0){//當展示的時最后一張圖片時，就是第一個位置的圖片向前滑動時讓他展示最后一張圖片 index=licount-2; lul.style.left=-index*lwidth+’px’; lul.style.transition=’none’ } }) </script>
效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備