原生JS實現移動端輪播圖

来源:https://www.cnblogs.com/sunyan-blog/archive/2019/12/01/11965545.html

功能描述: 自動無縫輪播圖片,底部小圓點跟圖片保持一致;手指左右移動輪播圖,移動距離大於50px播放下一張(或上一張),小於50px則回彈 具體功能實現: 1.定時器 自動輪播圖片 先聲明一個index=0用來存圖片索引; 添加一個定時器,每隔兩秒調用一次,每調用一次定時器(圖片播放一次)index ...


功能描述:

自動無縫輪播圖片,底部小圓點跟圖片保持一致;手指左右移動輪播圖,移動距離大於50px播放下一張(或上一張),小於50px則回彈

具體功能實現:

1.定時器 自動輪播圖片

先聲明一個index=0用來存圖片索引;

添加一個定時器,每隔兩秒調用一次,每調用一次定時器(圖片播放一次)index就加一;

通過transform(變形)屬性和transition(過渡)屬性實現圖片的輪播。

1 var index = 0;
2 var timer = setInterval(function() {
3     index++;
4     var translatex = -index * w;  // ul要移動的距離
5     ul.style.transition = 'all .4s';
6     ul.style.transform = 'translateX(' + translatex + 'px)';
7 }, 2000);

2.實現無縫輪播並讓小圓點和圖片一致

給ul綁定監聽函數(每次輪播移動的都是整個ul),過渡結束(transitionend)時執行;

判斷索引index是否大於等於3,是的話說明已經播放到最後一張,讓index=0並去掉過渡效果,快速回到第一張;

判斷索引是否小於0,小於0說明用戶一開始是往前滑的,讓index=2並去掉過渡效果,快速到最後一張;

讓底部小圓點跟著一起動(給當前li添加類,把其他的li刪除類)

 1 ul.addEventListener('transitionend', function() {
 2     if(index >= 3) {
 3         index = 0;
 4         ul.style.transition = '';  // 去掉過渡效果
 5         var translatex = -index * w;
 6         ul.style.transform = 'translateX(' + translatex + 'px)';
 7     } else if(index < 0) {
 8         index = 2;
 9         ul.style.transition = '';
10         var translatex = -index * w;
11         ul.style.transform = 'translateX(' + translatex + 'px)';
12     }
13     // 讓底部小圓點跟著一起動
14     // 將帶有current類的li去掉該類
15     ol.querySelector('.current').classList.remove('current');
16     // 給當前li添加current類
17     ol.children[index].classList.add('current');
18 })

3.實現圖片跟隨手指移動先聲明幾個變數用來存儲手指初始位置、手指是否在屏幕上移動以及手指移動的距離

var startX = 0;    // 手指初始位置
var moveX = 0;     // 手指在屏幕上移動的距離
var flag = false;    // 記錄用戶是否移動了手指

給ul綁定手指觸摸事件,記錄手指觸摸的初始位置,並清除定時器(不讓它自動輪播了)

1 ul.addEventListener('touchstart', function(e) {
2     startX = e.targetTouches[0].pageX;  // 手指的初始觸摸位置(左右輪播,只記錄x就可以了)
3     clearInterval(timer);
4 })

給ul綁定手指移動事件

1 ul.addEventListener('touchmove', function(e) {
2     moveX = e.targetTouches[0].pageX - startX;   // 手指移動的距離
3     var translatex = -index * w + moveX;
4     ul.style.transition = 'none';
5     ul.style.transform = 'translateX(' + translatex + 'px)';
6     flag = true;    // 手指移動了,將flag改為true
7     e.preventDefault();   // 阻止屏幕滾動的預設行為(防止用戶移動輪播圖的時候屏幕也跟著上下滾動)
8 })

4.實現手指離開後圖片的軌跡看用戶是否移動了圖片,flag為true才去判斷:

①手指移動距離大於50px圖片播放上一張或下一張②手指移動距離小於50px圖片回彈;

結束後把flag改為false,並重新開啟定時器讓它繼續自動輪播

 1 ul.addEventListener('touchend', function(e) {
 2     if(flag) {     // flag==true(移動圖片)時才去判斷用戶的移動方向和距離
 3         if(Math.abs(moveX) > 50) {  // 移動距離大於50時 滑向上一張或下一張(moveX可能為正也可能為負,Math.abs()取絕對值)
 4             if(moveX > 0) {  // 大於0右滑 圖片索引減一
 5                 index--;
 6             } else {    // 小於0左滑 圖片索引加一
 7                 index++;
 8             }
 9             var translatex = -index * w;
10             ul.style.transition = 'all .3s';
11             ul.style.transform = 'translateX(' + translatex + 'px)';
12         } else {    // 小於50px就回彈
13             var translatex = -index * w;
14             ul.style.transition = 'all .1s';
15             ul.style.transform = 'translateX(' + translatex + 'px)';
16         }
17     }
18     // 結束後 把flag重新改為false,並開啟定時器讓圖片開始輪播
19     flag = false;
20     // 先清除再開啟,保證只有一個定時器在運行(不然會有bug)
21     clearInterval(timer);
22     timer = setInterval(function() {
23         index++;
24         var translatex = -index * w;
25         ul.style.transition = 'all .4s';
26         ul.style.transform = 'translateX(' + translatex + 'px)';
27     }, 2000);
28 })

註:功能還可以繼續優化,比如動態添加圖片,動態添加底部小圓點等。具體實現方法可以參照我上一篇 JavaScript實現動態輪播圖效果 

 

具體實現代碼如下:

HTML代碼:

 1 <div class="focus">
 2     <ul>
 3         <!-- 用戶可能一開始往上一張滑,所以要多添加一個focus3 -->
 4         <li><img src="images/focus3.jpg" alt=""></li>
 5         <li><img src="images/focus1.jpg" alt=""></li>
 6         <li><img src="images/focus2.jpg" alt=""></li>
 7         <li><img src="images/focus3.jpg" alt=""></li>
 8         <li><img src="images/focus1.jpg" alt=""></li>
 9     </ul>
10     <ol>
11         <li class="current"></li>
12         <li></li>
13         <li></li>
14     </ol>
15 </div>

 

CSS代碼:

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body {
 6     margin: 0 auto;
 7     max-width: 540px;
 8     min-width: 320px;
 9     background: #f6f6f6;
10 }
11 .focus {
12     width: 100%;
13     position: relative;
14     margin-top: 50px;
15     overflow: hidden;
16 }
17 .focus ul {
18     width: 500%;
19     overflow: hidden;
20     margin-left: -100%;
21 }
22 .focus ul li {
23     float: left;
24     width: 20%;
25 }
26 .focus ul img {
27     width: 100%;
28 }
29 .focus ol {
30     position: absolute;
31     bottom: 5px;
32     right: 5px;
33 
34 }
35 .focus ol li {
36     width: 5px;
37     height: 5px;
38     display: inline-block;
39     background-color: #fff;
40     border-radius: 4px;
41     transition: all .2s;
42 }
43 .focus .current {
44     width: 15px;
45 }

 

JavaScript代碼:

 1 window.addEventListener('load', function() {
 2     var focus = document.querySelector('.focus');
 3     var ul = focus.children[0];   // 獲取focus的第一個孩子,也就是ul
 4     var ol = focus.children[1];
 5     var w = focus.offsetWidth;    // 獲取focus的寬度
 6     var index = 0;    // 用來記錄圖片索引
 7     var timer = setInterval(function() {    // 添加定時器,兩秒調用一次
 8         index++;   // 每調用一次(輪播一次),圖片索引號+1
 9         var translatex = -index * w;    // ul要移動的距離
10         ul.style.transition = 'all .4s';   // 添加過渡屬性(css3里的屬性)
11         ul.style.transform = 'translateX(' + translatex + 'px)';
12     }, 2000);
13     // 給ul綁定監聽函數(每次輪播移動的都是整個ul)  過渡結束(transitionend)時執行
14     ul.addEventListener('transitionend', function() {
15         if(index >= 3) {    // 索引 > 3說明已經輪播到最後一張了
16             index = 0;
17             // 去掉過渡效果 快速回到第一張
18             ul.style.transition = '';
19             var translatex = -index * w;
20             ul.style.transform = 'translateX(' + translatex + 'px)';
21         } else if(index < 0) {    // 索引 < 0說明用戶一開始是往前滑的
22             index = 2;
23             ul.style.transition = '';
24             var translatex = -index * w;
25             ul.style.transform = 'translateX(' + translatex + 'px)';
26         }
27         // 讓底部小圓點跟著一起動
28         // 將帶有current類的li去掉該類
29         ol.querySelector('.current').classList.remove('current');
30         // 給當前li添加current類
31         ol.children[index].classList.add('current');
32     })
33     // 手指滑動輪播圖
34     var startX = 0;    // 用來存儲手指初始位置
35     var moveX = 0;     // 用來存儲手指在屏幕上移動的距離
36     var flag = false;    // 記錄用戶是否在圖上移動了手指
37     // 給ul綁定手指觸摸事件
38     ul.addEventListener('touchstart', function(e) {
39         startX = e.targetTouches[0].pageX;  // 手指的初始觸摸位置(左右輪播,只記錄x就可以了)
40         clearInterval(timer);    // 當手指觸摸屏幕時清除定時器(不讓它自動輪播了)
41     })
42     // 給ul綁定手指移動事件
43     ul.addEventListener('touchmove', function(e) {
44         moveX = e.targetTouches[0].pageX - startX;   // 手指移動的距離
45         var translatex = -index * w + moveX;
46         ul.style.transition = 'none';
47         ul.style.transform = 'translateX(' + translatex + 'px)';
48         flag = true;    // 手指移動了,將flag改為true
49         e.preventDefault();   // 阻止屏幕滾動的預設行為
50     })
51     // 給ul綁定手指離開事件
52     ul.addEventListener('touchend', function(e) {
53         if(flag) {     // flag==true(移動圖片)時才去判斷用戶的移動方向和距離
54             if(Math.abs(moveX) > 50) {  // 移動距離大於50時 滑向上一張或下一張(moveX可能為正也可能為負,Math.abs()取絕對值)
55                 if(moveX > 0) {  // 大於0右滑 圖片索引減一
56                     index--;
57                 } else {    // 小於0左滑 圖片索引加一
58                     index++;
59                 }
60                 var translatex = -index * w;
61                 ul.style.transition = 'all .3s';
62                 ul.style.transform = 'translateX(' + translatex + 'px)';
63             } else {    // 小於50px就回彈
64                 var translatex = -index * w;
65                 ul.style.transition = 'all .1s';
66                 ul.style.transform = 'translateX(' + translatex + 'px)';
67             }
68         }
69         // 結束後 把flag重新改為false,並開啟定時器讓圖片開始輪播
70         flag = false;
71         // 先清除再開啟,保證只有一個定時器在運行(不然會有bug)
72         clearInterval(timer);
73         timer = setInterval(function() {
74             index++;
75             var translatex = -index * w;
76             ul.style.transition = 'all .4s';
77             ul.style.transform = 'translateX(' + translatex + 'px)';
78         }, 2000);
79     })
80 }) 

 


您的分享是我們最大的動力!

更多相關文章
  • cropperjs是一款非常強大卻又簡單的圖片裁剪工具,它可以進行非常靈活的配置,支持手機端使用,支持包括IE9以上的現代瀏覽器。(關鍵是使用方法簡單,幾行代碼就可以搞定) ...
  • 很糾結到底是繼續做UI設計還是轉行前端呢?從剛開始的害怕代碼到接觸代碼又喜歡代碼的過程,我在想我是不是太飄了,我感覺我做事就是三分鐘熱度。我感覺學前端對我最大的阻礙就是英語單詞了,10個單詞裡面最起碼有七八個我不知道的。其實我是個很討厭英語的人,但是看到代碼所實現的功能讓我感覺很有成就感,想學好英語 ...
  • let[a,...arr]=[1,2,3,4];//a==>1 arr==>[2,3,4] let [x, y, ...z] = ['a'];//a==>'a' y==>undefined z==> [] let [a, [b], d] = [1, [2, 3], 4];//a==>1 b==>2 ...
  • JS數據類型 1. 在電腦中,不同的數據所需要占用的空間是不同的,為了便於把數據分析稱所需記憶體大小不同的數據,充分利用存儲空間,於是定義了不同的數據類型 2. 簡單數據類型 | 簡單數據類型 | 說明 | 預設值 | | | | | | Number | 數字型,包含整型值和浮點型值 | 0 | ...
  • 什麼是演算法? 演算法是解決特定問題求解步驟的描述,在電腦中表現為指令的有限序列,並且每條指令表示一個或多個操作。 簡單來說,就是我們解決某一問題所使用的技巧和方法。 一個問題可以由多個演算法解決,一個演算法也不可能具有通解所有問題的能力。 演算法的特征: 輸入:演算法具有零個或多個輸入; 輸出:演算法至少有一 ...
  • 轉載於:https://blog.csdn.net/yufeitong/article/details/8485129 有這種情況,文本框輸入值後,再次刷新預設值就無法顯示了 原始html代碼: <form action="" method="post"> <input name="" type=" ...
  • 標準文檔流介紹 我們在製作 網頁的時候,都必須遵循一個 的規則如:從左至右、從上至下規則。 讓我們進入 網頁的標準文檔流基本原理實踐。 代碼塊 結果圖 標準文檔流要註意的事項 空白摺疊現象。 高矮不齊,底部對齊。 讓我們進入空白摺疊現象實踐。 代碼塊 結果圖 註意:咦結果圖之間怎麼有了空白的縫隙呢? ...
  • 在還沒有正式的學Node.js的時候, 你們認為Node.js 對於前端來說是什麼呢? 會認為Node.js 是框架? 認為這是類似Jquery的一個快速、簡潔的JavaScript框架? 反正我自己起初是這麼認為的,因為它後面有個 .js。 那麼在正式開始接觸Node.js的時候,才發現自己是有多 ...
一周排行
  • 微信公眾號: "Dotnet9" ,網站: "Dotnet9" ,問題或建議: "請網站留言" , 如果對您有所幫助: "歡迎贊賞" 。 .NET CORE(C ) WPF 抽屜式菜單 閱讀導航 1. 本文背景 2. 代碼實現 3. 本文參考 4. 源碼 1. 本文背景 使用簡單動畫實現抽屜式菜單 ...
  • 在上面abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之八(三十四) 文章的學習之後。我們通過前面的八篇文章已經學習了通過WebAPI介面與控制器去實現新增、刪除與修改功能。接下來,我們要在控制器中實現查詢功能。 ...
  • 1.選中項目-->屬性-->生成-->選中 XML文檔文件(xml路徑和該項目相同) 2.選擇生成序列化程式集:自動/開 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7640873.html,記錄一下學習過程以備後續查用。 一、引言 從今天開始我們開始講結構型設計模式,結構型設計模式有如下幾種:適配器模式、橋接模式、裝飾模式、組合模式、外觀模式、享元模式、代理模式。 創建型設 ...
  • C 中 ConfigureAwait 相關答疑FAQ 在前段時間經常看到園子里有一些文章討論到 ConfigureAwait,剛好今天在微軟官方博客看到了 "Stephen Toub" 前不久的一篇答疑 ConfigureAwait 的一篇文章,想翻譯過來。 原文地址:https://devblog ...
  • 想要實現二維數組中根據某個欄位排序,一般可以通過數組迴圈對比的方式實現。這裡介紹一種更簡單的方法,直接通過PHP函數實現。array_multisort() :可以用來一次對多個數組進行排序,或者根據某一維或多維對多維數組進行排序。詳細介紹可參考PHP手冊:https://www.php.net/m ...
  • 常用的軟體: 播放器: cloundMusic(網易雲音樂) https://music.163.com/#/download PotPlayer(一款強大的視頻播放器) https://daumpotplayer.com/download/ ACDsee(ACDsee圖片編輯器免費版) https ...
  • 發現問題 在一次偶然中,在爬取某個網站時,老方法,打開調試工具查看請求方式,請求攔截,是否是非同步載入,不亦樂乎,當我以為這個網站非常簡單的時候,發現二級網頁的地址和源碼不對應 Ajax非同步載入?源碼也是這樣的 而且這些鏈接直... ...
  • 準備年後要跳槽,所以最近一直再看面試題,並且把收集到的面試題整理了以下發到博客上,希望對大家有所幫助。 首先是集合類的面試題 1. HashMap 排序題,上機題。 已知一個 HashMap<Integer,User>集合, User 有 name(String)和 age(int)屬性。請寫一個方 ...
  • JVM體繫結構圖 Native Interface(本地介面) Java本地介面(Java Native Interface (JNI))允許運行在Java虛擬機(Java Virtual Machine (JVM))上的代碼調用本地程式和類庫,或者被它們調用,這些程式和類庫可以是其它語言編寫的,比 ...
x