JavaScript+css+HTML實(shí)現(xiàn)移動(dòng)端輪播圖（含源碼）
更新時(shí)間：2022年01月26日 17:52:35 作者：幾何心涼??
這篇文章主要介紹了JavaScript+css+HTML實(shí)現(xiàn)移動(dòng)端輪播圖并含源碼的分享，需要的小伙伴可以參考一下，希望對(duì)你有所幫助
1.移動(dòng)輪播圖
移動(dòng)端輪播圖與PC段輪播圖，在技術(shù)選擇上是有區(qū)別的，因?yàn)橐苿?dòng)端的瀏覽器版本非常好，對(duì)于H5和CSS3的支持非常完美，所以很多效果可以CSS3的方式實(shí)現(xiàn)，比如可以使用 Transorm 屬性替代原來的動(dòng)畫函數(shù)
- 可以自動(dòng)播放圖片
- 手指可以拖動(dòng)播放輪播圖
- 添加指示器，但只起到指示作用，點(diǎn)擊不能切換圖片
- 不需要左右導(dǎo)航
- 因?yàn)橐苿?dòng)端輪播圖的寬度一般與屏幕一樣寬，所以focus不設(shè)置寬度
- 移動(dòng)端使用CSS3的方式進(jìn)行圖片切換，所以可以給 focus_img 去掉 定位和 left屬性
- 因?yàn)閘i標(biāo)簽設(shè)置為float:left 后，就變成了行內(nèi)塊元素，其寬度由內(nèi)容決定，而其內(nèi)容圖片的寬度為520,，所以導(dǎo)致第四章圖片被記下來，解決方案：設(shè)置每個(gè)li標(biāo)簽的寬度為ul的20%，再設(shè)置圖片的寬度與li標(biāo)簽一樣狂
2.案例分析
- 自動(dòng)播放功能
- 開啟定時(shí)器
- 移動(dòng)端移動(dòng)，可以使用translate 移動(dòng)
- 想要圖片優(yōu)雅的移動(dòng)，請(qǐng)?zhí)砑舆^渡效果
- 自動(dòng)播放功能-無(wú)縫滾動(dòng)
- 注意，我們判斷條件是要等到圖片滾動(dòng)完畢再去判斷，就是過渡完成后判斷
- 此時(shí)需要添加檢測(cè)過渡完成事件 transitionend
- 判斷條件：如果索引號(hào)等于 3 說明走到最后一張圖片，此時(shí) 索引號(hào)要復(fù)原為 0
- 此時(shí)圖片，去掉過渡效果，然后移動(dòng)
- 如果索引號(hào)小于0， 說明是倒著走， 索引號(hào)等于2
- 此時(shí)圖片，去掉過渡效果，然后移動(dòng)
3.關(guān)于anime.js
Anime.js (/?æn.?.me?/) 是一個(gè)輕量的JavaScript 動(dòng)畫庫(kù)， 擁有簡(jiǎn)單而強(qiáng)大的API。可對(duì) CSS 屬性、 SVG、 DOM 和JavaScript 對(duì)象進(jìn)行動(dòng)畫。
下面我們輪播圖的實(shí)現(xiàn)就是基于這個(gè)js插件（可以訪問官網(wǎng)下載插件）
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>輪播圖</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? ul {
? ? ? ? ? ? list-style-type: none;
? ? ? ? }
? ? ? ? .focus {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? /*再移動(dòng)端，如果不設(shè)置如下的樣式，則其中的元素可以拖動(dòng)*/
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? ul.focus_img {
? ? ? ? ? ? width: 600%;
? ? ? ? ? ? margin-left: -100%;
? ? ? ? ? ? /* 以iphone6 為例 ?375*5 */
? ? ? ? }
? ? ? ? .focus_img li {
? ? ? ? ? ? /* border: 1px solid black; */
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 16.666%;
? ? ? ? ? ? /*375*6*0.2*/
? ? ? ? }
? ? ? ? .focus_img img {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? /*375*6*0.2*/
? ? ? ? }
? ? ? ? .focus_sort {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right: 20px;
? ? ? ? ? ? bottom: 20px;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? /* border: 1px solid black; */
? ? ? ? }
? ? ? ? .focus_sort li {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 20px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? background-color: #fff;
? ? ? ? ? ? margin-right: 10px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .focus_sort .current {
? ? ? ? ? ? background-color: red;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="focus">
? ? ? ? <!--輪播圖片-->
? ? ? ? <ul class="focus_img">
? ? ? ? ? ? <li><img src="./images/focus4.jpg" alt=""></li>
? ? ? ? ? ? <li><img src="./images/focus1.webp" alt=""></li>
? ? ? ? ? ? <li><img src="./images/focus2.webp" alt=""></li>
? ? ? ? ? ? <li><img src="./images/focus3.jpg" alt=""></li>
? ? ? ? ? ? <li><img src="./images/focus4.jpg" alt=""></li>
? ? ? ? ? ? <li><img src="./images/focus1.webp" alt=""></li>
? ? ? ? </ul>
? ? ? ? <ul class="focus_sort">
? ? ? ? ? ? <li class="current" data-index="0"></li>
? ? ? ? ? ? <li data-index="1"></li>
? ? ? ? ? ? <li data-index="2"></li>
? ? ? ? ? ? <li data-index="3"></li>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? var focus_img = document.querySelector('.focus_img')
? ? ? ? var focus = document.querySelector('.focus')
? ? ? ? var focusWidth = focus.offsetWidth
? ? ? ? var focus_sort = document.querySelector('.focus_sort')
? ? ? ? // 聲明變量，用來存儲(chǔ)輪播圖的計(jì)數(shù)器
? ? ? ? var index = 0
? ? ? ? // 聲明變量，存儲(chǔ)指示器計(jì)數(shù)器
? ? ? ? var sort = 0
? ? ? ? var timer = setInterval(function () {
? ? ? ? ? ? index++
? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? focus_img.style.transition = 'all 1s'
? ? ? ? ? ? focus_img.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? // 指示器切換
? ? ? ? ? ? changeSort()
? ? ? ? }, 3000)
? ? ? ? // 切換指示器
? ? ? ? function changeSort() {
? ? ? ? ? ? // for (var i = 0; i < focus_sort.children.length; i++) {
? ? ? ? ? ? // ? ? focus_sort.children[i].className = ''
? ? ? ? ? ? // }
? ? ? ? ? ? // 將上面的代碼替換成使用classList實(shí)現(xiàn)
? ? ? ? ? ? focus_sort.querySelector('.current').classList.remove('current')
? ? ? ? ? ? focus_sort.children[sort].className = 'current'
? ? ? ? }
? ? ? ? // 為focus_img 添加過渡結(jié)束事件(transitionend)，每當(dāng)過渡效果完成后
? ? ? ? // 會(huì)觸發(fā)這個(gè)事件
? ? ? ? // 如果用戶快速拖動(dòng)元素，在過渡沒有完成的情況下就再次拖動(dòng)元素，則會(huì)
? ? ? ? // 打破過渡的執(zhí)行，導(dǎo)致不會(huì)觸發(fā)這個(gè)事件
? ? ? ? focus_img.addEventListener('transitionend', function () {
? ? ? ? ? ? /*如果index==4，說明當(dāng)前輪播圖切換完成后，顯示的是最后一張圖片
? ? ? ? ? ? 而最后一張圖片與第一張圖片一樣，所以可以做如下操作：
? ? ? ? ? ? 快速的將ul拖動(dòng)到初始位置*/
? ? ? ? ? ? if (index == 4) {
? ? ? ? ? ? ? ? index = 0
? ? ? ? ? ? ? ? focus_img.style.transition = 'none'
? ? ? ? ? ? ? ? focus_img.style.transform = 'TranslateX(0px)'
? ? ? ? ? ? }
? ? ? ? ? ? else if (index < 0) {
? ? ? ? ? ? ? ? index = 3
? ? ? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? ? ? focus_img.style.transition = 'none'
? ? ? ? ? ? ? ? focus_img.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? }
? ? ? ? ? ? // 將九流閥設(shè)置為true
? ? ? ? ? ? flag = true
? ? ? ? ? ? sort = index
? ? ? ? ? ? changeSort()
? ? ? ? })
? ? ? ? /* 實(shí)現(xiàn)手指拖動(dòng)實(shí)現(xiàn)輪播效果
? ? ? ? 1）手指按下，停止自動(dòng)輪播，手指離開屏幕繼續(xù)開啟自動(dòng)輪播
? ? ? ? 2）實(shí)現(xiàn)輪播圖(focus_img)隨著手指的移動(dòng)而移動(dòng)
? ? ? ? 3）手指離開屏幕后，判斷用戶手指的移動(dòng)距離，根據(jù)距離判斷是切換輪播圖還是回彈輪播圖
? ? ? ? 4）如果用戶只是按下手指，并沒有移動(dòng)，然后手指就離開屏幕，可以不執(zhí)行第三步。：如何判斷：
? ? ? ? 只要用戶移動(dòng)手指就會(huì)觸發(fā)touchmove事件，如果用戶沒有移動(dòng)手指，不會(huì)觸發(fā)這個(gè)事件
? ? ? ? */
? ? ? ? // 聲明變量，存儲(chǔ)手指的按下時(shí)的位置
? ? ? ? var startx = 0
? ? ? ? // 聲明變量，存儲(chǔ)手指的移動(dòng)距離
? ? ? ? var movex = 0
? ? ? ? // 聲明一個(gè)變量，節(jié)流閥，用于指示是否可以切換輪播圖；如果只為true：可以，值為false：不可以
? ? ? ? var flag = true
? ? ? ? // 定義變量，標(biāo)志用戶是否移動(dòng)了手指
? ? ? ? isMoove = false // false 表示沒有移動(dòng)手指
? ? ? ? focus_img.addEventListener('touchstart', function (e) {
? ? ? ? ? ? // 停止計(jì)時(shí)器
? ? ? ? ? ? clearInterval(timer)
? ? ? ? ? ? // 獲取手指按下時(shí)的位置，賦值給startx
? ? ? ? ? ? startx = e.targetTouches[0].pageX
? ? ? ? })
? ? ? ? focus_img.addEventListener('touchmove', function (e) {
? ? ? ? ? ? // 只要用戶觸發(fā)了touchmove事件，就說明用戶的手指在元素上移動(dòng)了
? ? ? ? ? ? isMoove = true
? ? ? ? ? ? if (flag) {
? ? ? ? ? ? ? ? // 獲取手指的移動(dòng)距離
? ? ? ? ? ? ? ? movex = e.targetTouches[0].pageX - startx
? ? ? ? ? ? ? ? // 計(jì)算focus_img 的新坐標(biāo)：原始位置+手指移動(dòng)距離
? ? ? ? ? ? ? ? var translatex = - index * focusWidth + movex
? ? ? ? ? ? ? ? focus_img.style.transition = 'none'
? ? ? ? ? ? ? ? this.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? focus_img.addEventListener('touchend', function () {
? ? ? ? ? ? if (!isMoove) {
? ? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? ? ? isMoove = false
? ? ? ? ? ? console.log(movex);
? ? ? ? ? ? if (flag) {
? ? ? ? ? ? ? ? // 將節(jié)流閥設(shè)置為false
? ? ? ? ? ? ? ? flag = false
? ? ? ? ? ? ? ? // console.log(movex);
? ? ? ? ? ? ? ? if (Math.abs(movex) >= 50) {
? ? ? ? ? ? ? ? ? ? if (movex > 0) {
? ? ? ? ? ? ? ? ? ? ? ? index--
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? index++
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? ? ? ? ? focus_img.style.transition = 'all 1s'
? ? ? ? ? ? ? ? ? ? this.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 顯示當(dāng)前的輪播圖
? ? ? ? ? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? ? ? ? ? focus_img.style.transition = 'all .3s'
? ? ? ? ? ? ? ? ? ? this.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? // 重新開啟自動(dòng)輪播圖
? ? ? ? ? ? clearInterval(timer)
? ? ? ? ? ? timer = setInterval(function () {
? ? ? ? ? ? ? ? index++
? ? ? ? ? ? ? ? var translatex = -index * focusWidth
? ? ? ? ? ? ? ? focus_img.style.transition = 'all 1s'
? ? ? ? ? ? ? ? focus_img.style.transform = 'TranslateX(' + translatex + 'px)'
? ? ? ? ? ? }, 3000)
? ? ? ? })
? ? </script>
</body>
</html>
相關(guān)文章
如何利用JS將手機(jī)號(hào)中間四位變成*號(hào)
這篇文章主要介紹了如何利用JS將手機(jī)號(hào)中間四位變成*號(hào),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
avalonjs實(shí)現(xiàn)仿微博的圖片拖動(dòng)特效
JavaScript實(shí)現(xiàn)仿微博的圖片拖動(dòng)特效，貌似這些天有不少朋友需要這功能，今天發(fā)現(xiàn)這款是js制作的好，不敢獨(dú)享，希望需要的朋友喜歡哦。2015-05-05
JavaScript基礎(chǔ)系列之函數(shù)和方法詳解
經(jīng)常談?wù)撈鸷瘮?shù)和方法,也常常搞不清楚它們之間的界限,經(jīng)常把兩個(gè)混用,這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)系列之函數(shù)和方法的相關(guān)資料,需要的朋友可以參考下2021-09-09
JavaScript實(shí)現(xiàn)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
firefox瀏覽器下javascript 拖動(dòng)層效果與原理分析代碼
這篇文章主要給大家介紹了關(guān)于在firefox瀏覽器下如何利用javascript實(shí)現(xiàn)拖動(dòng)層效果，以及其中的原理分析，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，下面來一起看看吧2007-12-12
javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了javascript獲取ckeditor編輯器的值，用于表單驗(yàn)證。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)人臉識(shí)別登陸的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js創(chuàng)建一個(gè)input數(shù)組并綁定click事件的方法
這篇文章主要介紹了js創(chuàng)建一個(gè)input數(shù)組并綁定click事件的方法,需要的朋友可以參考下2014-06-06
JavaScript緩沖運(yùn)動(dòng)實(shí)現(xiàn)方法(2則示例)
這篇文章主要介紹了JavaScript緩沖運(yùn)動(dòng)實(shí)現(xiàn)方法,簡(jiǎn)單分析了JavaScript緩沖運(yùn)動(dòng)的實(shí)現(xiàn)原理與相關(guān)運(yùn)算技巧,并給出了兩則實(shí)例代碼予以總結(jié)分析,需要的朋友可以參考下2016-01-01
微信小程序開發(fā)打開另一個(gè)小程序的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序開發(fā)打開另一個(gè)小程序的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05