成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術(shù)文章
文章詳情頁

javascript實(shí)現(xiàn)移動(dòng)端輪播圖

瀏覽：5日期：2023-06-13 08:17:59

本文實(shí)例為大家分享了js實(shí)現(xiàn)移動(dòng)端輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

<!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.piao2010.com/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.piao2010.com/bcjs/14270.html'> <img src='http://www.piao2010.com/bcjs/img/1.png' alt=''> </a> </li> <li > <a href='http://www.piao2010.com/bcjs/14270.html'> <img src='http://www.piao2010.com/bcjs/img/2.png' alt=''> </a> </li> <li > <a href='http://www.piao2010.com/bcjs/14270.html'> <img src='http://www.piao2010.com/bcjs/img/3.png' alt=''> </a> </li> </ul> </div></body></html>

js：

<script src='http://www.piao2010.com/bcjs/rem.js'></script><script> //設(shè)置動(dòng)態(tài)的css樣式 var lunbo =document.querySelector(’.lunbo’) var lul=document.querySelector(’.lul’) var fimg =document.querySelectorAll(’li’)[0]; var limg =document.querySelectorAll(’li’)[2];// cloneNode復(fù)制一個(gè)元素// appendChild() 方法可向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)，再最后一張圖片后面添加第一張圖片 lul.appendChild(fimg.cloneNode(true))//在第一張圖片前面添加最后一張圖片 lul.insertBefore(limg.cloneNode(true),lul.firstChild)// 獲取lul下面全部的li var lis= lul.querySelectorAll(’li’) // 獲取li元素的數(shù)量var licount = lis.length;// 獲取輪播圖總共的寬度var lwidth = lunbo.offsetWidth;// 設(shè)置圖片盒子的寬度lul.style.width=licount*lwidth+’px’;//設(shè)置每一個(gè)li元素的樣式 給他們定義寬度 他的寬度就等于我們頁面的寬度也就是lunbo的寬度for(i=0;i<lis.length;i++){ lis[i].style.width=lwidth+’px’}//設(shè)置偏移距離lul.style.left=-lwidth+’px’// 設(shè)置自動(dòng)輪播// 設(shè)置索引(設(shè)置索引為1，因?yàn)閳D片已經(jīng)偏移了)var index=1// 設(shè)置定時(shí)器先去封裝他，因?yàn)楹竺嬉_啟定時(shí)器，調(diào)用這個(gè)函數(shù)就行了var time;//要在外面定義time不然后面清除定時(shí)器接收不到函數(shù)//當(dāng)手指滑動(dòng)輪播圖過快的時(shí)候后面的輪播圖就不會(huì)顯示，因?yàn)榛瑒?dòng)過快時(shí)過度沒有完成就不會(huì)觸發(fā)webkitTransitionEnd（監(jiān)聽當(dāng)元素執(zhí)行完過度效果）//所以設(shè)置一個(gè)變量用來控制，（過度效果未完成不能滑動(dòng)圖片）var con=true var ltime=function(){ time=setInterval(function(){index++// 設(shè)置偏移 每次偏移都是以最初的點(diǎn)為參照點(diǎn)點(diǎn)的，所以如果每次都便宜一個(gè)width的話圖片就不動(dòng)lul.style.left=(-index*lwidth)+’px’// 添加過度效果,在最后一張?zhí)降谝粡垥r(shí)要清除過度效果所以要加上如果在清除過度后面添加else{ lul.style.transition=’all 1s’}的話因?yàn)橛袀€(gè)定時(shí)器所以不能流暢執(zhí)行l(wèi)ul.style.transition=’all 1s’setTimeout(function(){ // 判斷是否到最后一張// 當(dāng)顯示為最后一幢圖片時(shí)進(jìn)行操作，最后一張圖片的索引值為licount-1if(index==licount-1){ index=1;// 偏移到最開始的位置lul.style.left=(-index*lwidth)+’px’//當(dāng)顯示最后一張的時(shí)候會(huì)移回去，所以要清除過度效果lul.style.transition=’none’}//如果直接清除過度效果的話最后一張就直接跳過去了，所以讓他延遲一會(huì)在進(jìn)行判斷（跳轉(zhuǎn)），這就是為什么在最后一張后面要添加第一張圖片了 },1000)},2000) }ltime();//設(shè)置觸摸事件// 定義手指的坐標(biāo) 分為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){//切換圖片 如果手指觸摸滑動(dòng)的距離超過100進(jìn)行圖片切換 if(dis>0){//如果偏移值為正數(shù)則向下一張偏移（向右滑動(dòng)） index-- } else{//如果偏移值為負(fù)數(shù)則向下一張偏移（向左滑動(dòng)） index++ } //設(shè)置輪播圖的最終偏移，添加過度 lul.style.left=-index*lwidth+’px’; lul.style.transition=’all 0.5s’ } else if(Math.abs(dis)>0 ){//確定用戶做出拖拽事件，點(diǎn)一下的話不需要做出相關(guān)操作 //設(shè)置輪播圖回彈，添加過度效果 lul.style.left=-index*lwidth+’px’; lul.style.transition=’all 0.5s’ }//執(zhí)行完觸摸事件就可以從新開啟定時(shí)器了sx=0;mx=0;dis=0;ltime()})//解決輪播圖劃到第一張或者最后一張時(shí)沒有圖片//添加 webkitTransitionEnd 事件，webkitTransitionEnd事件是監(jiān)聽當(dāng)元素執(zhí)行完過度效果 lul.addEventListener(’webkitTransitionEnd’,function(){con=trueif(index==licount-1){//當(dāng)滑動(dòng)到最后一個(gè)圖片時(shí)展示的是倒數(shù)第二張圖片讓圖片展示的為第一張 index=1;//index時(shí)從0開始的 lul.style.left=-index*lwidth+’px’; lul.style.transition=’none’ }else if(index==0){//當(dāng)展示的時(shí)最后一張圖片時(shí)，就是第一個(gè)位置的圖片向前滑動(dòng)時(shí)讓他展示最后一張圖片 index=licount-2; lul.style.left=-index*lwidth+’px’; lul.style.transition=’none’ } }) </script>

效果圖：

javascript實(shí)現(xiàn)移動(dòng)端輪播圖

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽： JavaScript
相關(guān)文章：