2. 程式人生 > >JS原生輪播圖實現

JS原生輪播圖實現

阿新 • • 發佈：2018-11-08
作為一個PHP全棧攻城獅，不僅要會後端PHP和資料庫，還要會前端JS。今天原始碼時代 PHP培訓 學科老師要和大家分享一下JS原生編寫輪播圖的外掛。 說起輪播圖，很多人會選擇使用各種外掛，比如基於JQuery或其它框架的。不瞞大家，我也用過，甚至還用過Flash的輪播圖。總體來說，用起來是比較簡單，但是有一個非常嚴重的問題，那就是載入速度非常非常慢。

如果能自己使用JS原生寫一個輪播圖，不僅速度快，那感覺也是高大上，頗有高階前端工程師的feel啊。不過今天為了大家好理解，我們使用面向過程的程式碼編寫（面向過程關注細節，方便理解原理；面向物件使用方便，但不方便新手理解）。

在開始編寫之前我們需要準備幾張測試圖片，以及一些技術基礎：JavaScript、HTML、CSS。為了方便測試，我們約定一下測試環境：三張相同大小的圖片放在images目錄中，所有的JS、HTML、CSS程式碼寫在一個html檔案中；由於使用了新的DOM API，所以建議使用chrome50以上版本的瀏覽器。


編寫思路：
1）來三張圖和三個按鈕，將所有圖片排成一行，將第一張複製一份放在最後（也可以全部複製放在後面，但只會用到第一張，重複出現一次三張圖，一共六張圖）
2）通過外邊距偏移實現輪播
預設顯示第1張圖
第1次改變，第1張圖移出，第2張圖出現
第2次改變，第2張圖移出，第3張圖出現
第0次改變，第3張圖移出，第4張圖出現（第4張是第1張的複製，使用者感覺是回到了第1張）
輪迴，第0次改變，瞬間將移回第1張，由於第4張圖和第1張一樣，所以使用者無法感覺這個變化，然後繼續第1張圖移出，第2張出現
...
3）給按鈕新增點選事件
觸發時停止自動播放，並切換到指定的圖片


第一步：編寫HTML和CSS
編寫HTML：
三張圖
三個按鈕
編寫CSS：
將所有圖片排成一行
將按鈕排到輪播圖中間底部
設定按鈕的狀態樣式
                
程式碼如下：
  1. <!DOCTYPE html>
  2.         <html>
  3.         <head>
  4.         <meta charset="UTF-8">
  5.         <title>輪播圖1</title>
  6.         <style>
  7.         .banner{overflow:hidden;position:relative;border:4px solid #f00;width:1000px;}
  8.         .banner ul{margin:0;padding:0;list-style:none;}
  9.         .banner .list li{float:left;}
  10.         .banner .list img{display:block;width:100%;}
  11.         
  12.         .icos{position:absolute;z-index:1;left:50%;bottom:14px;}
  13.         .icos li{text-indent:-9999px;background:#ccc;width:12px;height:12px;float:left;margin:0 5px;border-radius:100%;}
  14.         .icos li.on{background:#f00;}
  15.         </style>
  16.         </head>
  17.         <body>
  18.         <div class="banner">
  19.         <ul class="list">
  20.                 <li><img src="images/01.jpg"></li>
  21.                 <li><img src="images/02.jpg"></li>
  22.                 <li><img src="images/03.jpg"></li>
  23.         </ul>
  24.         <ul class="icos">
  25.                 <li class="on">0</li>
  26.                 <li>1</li>
  27.                 <li>2</li>
  28.         </ul>
  29.         </div>
  30.         </body>
  31.         </html>
複製程式碼 第二步：編寫JavaScript獲取元素
獲取輪播圖片總數（用於計算顯示輪迴）
獲取每屏寬度（用於計算每次偏移量）
        
程式碼：
  1. <script>
  2.         window.onload=function(){
  3.                 //獲取所有元素
  4.                 var list=document.querySelector('.list');
  5.                 var icos=document.querySelectorAll('.icos li');
  6.                 var li=document.querySelectorAll('.list li');
  7.                 var len=li.length; //一共幾張圖
  8.                 var li_width=document.querySelector('.banner').clientWidth; //每張圖的寬度
  9.                 list.innerHTML=list.innerHTML+list.innerHTML; //在列表最後新增一份，在展示最後一張切到第一張時實際展示的是剛新增的這張
  10.                 li=document.querySelectorAll('.list li'); //重新獲取所有節點
  11.                 //為每一個li設定寬度
  12.                 for(var i=0;i<li.length;i++){
  13.                         li[i].style.width=li_width+'px';
  14.                 }
  15.                 list.style.width=li_width*li.length+"px"; //設定總寬度，讓所有圖片在一行顯示
  16.         }
  17.         </script>
複製程式碼        
第三步：實現輪播
設定定時器實現隔3秒切換一張圖片
切換圖片時，需要傳入切換到指定圖片的編號
計算偏移量
設定定時器實現偏移時的動畫效果
實現按鈕狀態同步變化
        
        JS程式碼：
  1. //通過偏移實現動畫
  2.         function show(n){
  3.                 if(n==1){ //這個判斷順序很關鍵，必須放在上面，實現最後一張瞬間切回第一張，再轉到第二張
  4.                         list.style.marginLeft='0px';
  5.                 }
  6.                 /*
  7.                 默認出現第1張
  8.                 n=1        動畫出現第二張，第一張消失
  9.                 n=2        動畫出現第三張，第二張消失
  10.                 n=0        動畫出現第四張（第一張的複製），第三張消失
  11.                 n=1        瞬間切回第一張（由於第一張和第四張相同，肉眼看不出變化），再動畫出現第二張，第一張消失
  12.                 */
  13.                 
  14.                 var w=n>0 ? -(n-1)*li_width : -(len-1)*li_width; //計算偏移量，以實現動畫效果，等於0時特殊處理，展示手動加的那一張
  15.                 var step=20; //步長可根據寬度計算得到
  16.                 var i=step;
  17.                 var timer=setInterval(function(){
  18.                         list.style.marginLeft=(w-i)+'px';
  19.                         i+=step;
  20.                         if(i>li_width){ //顯示完一張圖就停止
  21.                                 clearInterval(timer);
  22.                         }
  23.                 },20);
  24.                 
  25.                 //改變按鈕狀態
  26.                 for(var j=0; j<icos.length; j++){
  27.                         if(n==j){
  28.                                 icos[j].className='on';
  29.                         }else{
  30.                                 icos[j].className='';
  31.                         }
  32.                 }
  33.         }
  34.         
  35.         //自動播放函式
  36.         function autoplay(){
  37.                 var count=1; //初始是第1張，自動播放從第2張開始
  38.                 timeId=setInterval(function(){
  39.                         show(count % len); //取餘數實現輪流播放
  40.                         count++;
  41.                 },3000);
  42.         }
  43.         
  44.         autoplay();
複製程式碼 第四步：按鈕功能
給所有按鈕新增事件
點選時停止自動播放，切換到指定的圖片
        
JS程式碼：
  1. //給每一個按鈕繫結事件
  2.         for(var i=0; i<icos.length; i++){
  3.                 icos[i].onmouseover=function(){ //滑鼠移到小圖示上時取消自動播放並切換到指定的圖片上
  4.                         clearInterval(timeId);
  5.                         show(this.innerText);
  6.                 }
  7.                 icos[i].onmouseout=function(){ //滑鼠移開時繼續自動播放
  8.                         autoplay();
  9.                 }
  10.         }
複製程式碼 程式碼彙總：
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>輪播圖1</title>
  6.                 <style>
  7.                         .banner{overflow:hidden;position:relative;border:4px solid #f00;width:1000px;}
  8.                         .banner ul{margin:0;padding:0;list-style:none;}
  9.                         .banner .list li{float:left;}
  10.                         .banner .list img{display:block;width:100%;}
  11.                         
  12.                         .icos{position:absolute;z-index:1;left:50%;bottom:14px;}
  13.                         .icos li{text-indent:-9999px;background:#ccc;width:12px;height:12px;float:left;margin:0 5px;border-radius:100%;}
  14.                         .icos li.on{background:#f00;}
  15.                 </style>
  16.         </head>
  17.         <body>
  18.                 <div class="banner">
  19.                         <ul class="list">
  20.                                 <li><img src="images/01.jpg"></li>
  21.                                 <li><img src="images/02.jpg"></li>
  22.                                 <li><img src="images/03.jpg"></li>
  23.                         </ul>
  24.                         <ul class="icos">
  25.                                 <li class="on">0</li>
  26.                                 <li>1</li>
  27.                                 <li>2</li>
  28.                         </ul>
  29.                 </div>
  30.                 
  31.                 <script>
  32.                         window.onload=function(){
  33.                                 //獲取所有元素
  34.                                 var list=document.querySelector('.list');
  35.                                 var icos=document.querySelectorAll('.icos li');
  36.                                 var li=document.querySelectorAll('.list li');
  37.                                 var len=li.length; //一共幾張圖
  38.                                 var li_width=document.querySelector('.banner').clientWidth; //每張圖的寬度
  39.                                 list.innerHTML=list.innerHTML+list.innerHTML; //在列表最後新增一份，在展示最後一張切到第一張時實際展示的是剛新增的這張
  40.                                 li=document.querySelectorAll('.list li'); //重新獲取所有節點
  41.                                 
  42.                                 //為每一個li設定寬度
  43.                                 for(var i=0;i<li.length;i++){
  44.                                         li[i].style.width=li_width+'px';
  45.                                 }
  46.                                 list.style.width=li_width*li.length+"px"; //設定總寬度，讓所有圖片在一行顯示
  47.                                 
  48.                                 //給每一個按鈕繫結事件
  49.                                 for(var i=0; i<icos.length; i++){
  50.                                         icos[i].onmouseover=function(){ //滑鼠移到小圖示上時取消自動播放並切換到指定的圖片上
  51.                                                 clearInterval(timeId);
  52.                                                 show(this.innerText);
  53.                                         }
  54.                                         icos[i].onmouseout=function(){ //滑鼠移開時繼續自動播放
  55.                                                 autoplay();
  56.                                         }
  57.                                 }
  58.                                 
  59.                                 //通過偏移實現動畫
  60.                                 function show(n){
  61.                                         if(n==1){ //這個判斷順序很關鍵，必須放在上面，實現最後一張瞬間切回第一張，再轉到第二張
  62.                                                 list.style.marginLeft='0px';
  63.                                         }
  64.                                         /*
  65.                                         默認出現第1張
  66.                                         n=1        動畫出現第二張，第一張消失
  67.                                         n=2        動畫出現第三張，第二張消失
  68.                                         n=0        動畫出現第四張（第一張的複製），第三張消失
  69.                                         n=1        瞬間切回第一張（由於第一張和第四張相同，肉眼看不出變化），再動畫出現第二張，第一張消失
  70.                                         */
  71.                                         
  72.                                         var w=n>0 ? -(n-1)*li_width : -(len-1)*li_width; //計算偏移量，以實現動畫效果，等於0時特殊處理，展示手動加的那一張
  73.                                         var step=20; //步長可根據寬度計算得到
  74.                                         var i=step;
  75.                                         var timer=setInterval(function(){
  76.                                                 list.style.marginLeft=(w-i)+'px';
  77.                                                 i+=step;
  78.                                                 if(i>li_width){ //顯示完一張圖就停止
  79.                                                         clearInterval(timer);
  80.                                                 }
  81.                                         },20);
  82.                                         
  83.                                         //改變按鈕狀態
  84.                                         for(var j=0; j<icos.length; j++){
  85.                                                 if(n==j){
  86.                                                         icos[j].className='on';
  87.                                                 }else{
  88.                                                         icos[j].className='';
  89.                                                 }
  90.                                         }
  91.                                 }
  92.                                 
  93.                                 //自動播放函式
  94.                                 function autoplay(){
  95.                                         var count=1; //初始是第1張，自動播放從第2張開始
  96.                                         timeId=setInterval(function(){
  97.                                                 show(count % len); //取餘數實現輪流播放
  98.                                                 count++;
  99.                                         },3000);
  100.                                 }
  101.                                 
  102.                                 autoplay();
  103.                         }
  104.                 </script>
  105.         </body>
  106. </html>
複製程式碼

總結，和所有的PHP框架一樣，所有JS框架和庫都是基於原生JS編寫的，只有把原生JS的程式碼掌握好，才能以不變應萬變，在技術領域平靜對待各種變化。

本文來源：http://bbs.itsource.cn/thread-1662-1-1.html，轉載請註明出處！

相關推薦

JS原生輪播圖實現

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

JS原生輪播圖

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

JS原生輪播圖方法及技巧

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

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

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

JS原生輪播圖程式碼

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

原生js輪播圖實現

索引 獲取 mouseout abs length ati point css ack 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

適合【前端入門者】的原生JS輪播圖實現

學前端已經一年多了，在JavaScript方面，學會了基本語法，頁面操作之後，慢慢走向了框架這條不歸路，框架用起來真的是省時省力，效果好、程式碼少、還節省時間。 在前幾天去做一個頁面的時候，要求只能是用以前版本的框架，我就去找框架之前的版本，可是在某些官網上老版本的框架已經不存在了，就我這暴脾氣

用原生js封裝輪播圖

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

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

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

JS——初級輪播圖的實現（縱向）

描述： 縱向buton或者底部數字控制輪播，可以實現自動輪播（註釋了，使用的話將其註釋消掉），核心知識是資料驅動影象的透明度達到效果。 效果： 程式碼： js檔案： /* * 工廠模式 * */ var Method=(function () { return

JS——初級輪播圖的實現（橫向）

描述： 輪播圖，初級，橫向buton或者底部數字控制輪播，可以實現自動輪播（註釋了，使用的話將其註釋消掉），核心知識是資料驅動影象的位移達到效果。 效果： 程式碼： js檔案： /* * 工廠模式 * */ var Method=(function () {

最簡單 最詳細的原生js寫輪播圖

最簡單最詳細的原生js寫輪播圖 該輪播圖實現了自動輪播，圖片切換，滑鼠移入移出事件，佈局簡單，容易上手。希望能幫到大家。效果圖如下： 佈局擴充套件 裡面用了幾種方式實現了div的垂直居中，可見樣式程式碼註釋。 HTML

原生js簡單輪播圖 代碼

font 之前 flow script for語句 瀏覽器 奇怪 mat 第一次 在團隊帶人，突然被人問到輪播圖如何實現，進入前端領域有一年多了，但很久沒自己寫過，一直是用大牛寫的插件，今天就寫個簡單的適合入門者學習的小教程。當然，輪播圖的實現原理與設計模式有很多種，我這裏

JS面向物件輪播圖實現

// 面對過程寫法//var pci=document.getElementById('pci'); //var ul=document.getElementById('ul'); //var li=document.getElementsByTagName('li'); //var left=documen

js網站輪播圖怎麽做如何做？雞哥教你簡單制作效果炫酷

多人 tle 哪裏 round 下載 簡單的 文件 但是 cell 日了狗啦，剛剛雞哥辛苦碼了那麽多字全丟了又要重新寫，這是第二遍寫了...今天雞哥給小白寫個不需要寫js原生代碼，只需要幾個插件和一段通俗易懂得jquery代碼就能搞定的輪播圖，當然js原生代碼寫著也不算很繁

JS之輪播圖自動切換效果

poi 自動切換 relative amp index 點擊 mouseover 更新 adding 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=

JS 無縫輪播圖1-節點操作

idt radius nbsp black -o flow 開開 接下來 con 無縫輪播圖 (使用節點操作) <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

vue輪播圖報錯 Uncaught RangeError: Maximum call stack size exceeded 附完整輪播圖實現程式碼

Vue初學者，寫專案實現輪播圖時報錯且頁面初始化後不會自動輪播。 設定的計時器時長是6000，但報錯是幾乎沒有停歇的報錯。 檢查核心程式碼，發現 錯誤一：這裡導致輪播圖初始化不輪播 mounted的方法寫在了methods裡面，將mounted的方法挪出，解決頁面初始化輪播圖不

移動端輪播圖實現

1：HTML樣式<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-s

最簡單的輪播圖實現

需求：每隔2秒切換一張圖片的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>輪播圖</title>