利用JavaScript jQuery實現圖片無限循

利用JavaScript jQuery實現圖片無限循環輪播(不借助于輪播插件)

言

　　作為一個前端工程師，無論公司是什么行業，無論你做什么端，基本都會遇到一個避不開的動畫效果：循環輪播。做輪播并不難，市場上的輪播插件有很多，其中比較著名的是swiper，使用也非常簡單。但輪播插件這種東西總歸是不靈活的，一些簡單的場景還可以應付，比較復雜一點的場景處理起來就比較麻煩了。今天我會全程帶大家來寫一個循環輪播，用到的技術有：html、css、JavaScript、jQuery，都是前端最基礎的技術，有基礎又愛學肯學的你一定一聽就會，如果不會咋整？那多看幾遍。

　　1. 效果展示

　　以小米官網的圖片輪播為例，實際上千篇一律，好啦，看下圖：

　　　好啦，看效果，不要看妹子，雖然妹子長得是很好看啦！

　　2. 原理分析

　　無限循環輪播的原理是在展示內容的前后各放一組圖片，以無限循環展示3張照片為例，三張圖片我給它取名為1.jpg,2.jpg,3.jpg,圖片展示分別如下：

　　原理示意圖展示：

　　原理其實就是復制兩組同樣的照片分別放在前面和后面(實際上不用完全復制兩組，只需要前面可以看到1.jpg，后面也可以到1.jpg就好了，但這里我為了方便大家理解，就采用這樣的方式了)。當點左邊按鈕，圖片輪播到第一張1.jpg時，讓盛放圖片的容器瞬間拉回到第二張1.jpg照片的位置，注意一定要是瞬間。同理，當點右邊按鈕時，圖片輪播到第三張1.jpg的時候，也讓盛放圖片的容器瞬間拉回到第二張1.jpg照片的位置。這是實現圖片循環輪播的關鍵，稍后會仔細講解。

　　3. 代碼

　　html代碼：

<div class="slideImageContainer">
    <div class="slideImageLists">
        <img src="1.jpeg" />
        <img src="2.jpeg" />
        <img src="3.jpeg" />
        <img src="1.jpeg" />
        <img src="2.jpeg" />
        <img src="3.jpeg" />
        <img src="1.jpeg" />
        <img src="2.jpeg" />
        <img src="3.jpeg" />
    </div>
    <div class="slideLeftBtn" id="slideLeftBtn"></div>
    <div class="slideRightBtn" id="slideRightBtn"></div>
</div>

　　css 代碼：

*{
    padding: 0;
    margin: 0;
}
@font-face {
    font-family: 'iconfont';  /* project id 208314 */
    src: url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.eot');
    src: url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.woff') format('woff'),
    url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.svg#iconfont') format('svg');
}
.slideImageContainer{
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 auto;
    border: solid 1px red;
    overflow: hidden;
}
.slideImageLists{
    position: absolute;
    left: -1800px;
    top: 0;
    width: 10000px;
    height: 300px;
}
.slideImageLists img{
    display: block;
    width: 600px;
    height: 300px;
}
.slideLeftBtn,.slideRightBtn{
    position: absolute;
    font-family: "iconfont";
    font-size: 60px;
    top: 120px;
    color: #191f25;
    opacity: 0.3;
    cursor: pointer;

    user-select: none;  
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.slideLeftBtn:hover,.slideRightBtn:hover{
    opacity: 0.6;
}
.slideLeftBtn{
    left: 10px;
}
.slideRightBtn{
    right: 10px;
}

　　頁面布局是很重要的一部分內容，它是頁面的基石。頁面布局寫得好實現效果的時候能帶來很大的方便。因此這里強調幾個應該注意的地方：

　　1. 所有的圖片要放在一個很長的容器中，這里是slideImageList，每次移動實際上就是它在相對于他的父元素slideImageContainer而移動，所以需要給slideImageContainer 一個 position:relative 的定位，給 slideImageList 一個 position: absoluete 的定位。

　　2. slideImageList要放在一個比較小的容器中，在這里是slideImageContainer，作用是為了顯示你想要顯示的區域，注意要加 overflow:hidden 屬性，讓多余的內容不顯示。

　　3. 左右按鈕我采用的是iconfont的使用方式，這個比較簡單，此處不多加以闡述。不會使用iconfont的同學可以直接貼兩個圖片或者左右箭頭符號在上面。

　　4. 容器slideImageList中的圖片要排列在一條直線上，并且初始情況下需要給slideImageList一個left值，因為最開始我們想讓第四張照片展示，所以此時的left值為-1800px，要記住這個值，因為我們待會兒要常用到這個值。

　　5. @font-face 是引入 iconfont 相關的資源內容，不使用iconfont的可忽略。

　　接下來看javascript代碼：

var slideIndex=3;   //記錄初始圖片的下標( 默認最初展示第四張圖片，下標從0開始，所以初始值為3 )
//左邊按鈕的點擊事件
$("#slideLeftBtn").on("click",function(){
    // 點擊左按鈕的時候想要顯示當前圖片的前一張，所以slideIndex值要減去1
    slideIndex--;
    // animateLength表示想要讓slideImageLists移動到什么位置，slideImageLists 的位置由 left屬性來控制
　　 var animateLength=slideIndex * (-600) + "px";
    $(".slideImageLists").animate({"left":animateLength},"slow",function(){
        // animate的回調函數(即執行完動畫之后才會執行函數里面的內容)
        if(slideIndex <=0){
            $(".slideImageLists").css({"left":"-1800px"});
            slideIndex=3;
        }
    });
})
//右邊按鈕的點擊事件
$("#slideRightBtn").on("click",function(){
    // 點擊右按鈕的時候想要顯示當前圖片的后一張，所以slideIndex值要加上1
    slideIndex++;
    var animateLength=slideIndex * (-600) + "px";
    $(".slideImageLists").animate({"left":animateLength},"slow",function(){
　　　　　if(slideIndex >=6){
            $(".slideImageLists").css({"left":"-1800px"});
            slideIndex=3;
        }
    })
})

　　現在著重來分析一下JavaScript的代碼，同樣有幾個關鍵點需要注意，其中部分我已在代碼中注釋：

　　1. 全局變量 slideIndex 指的是圖片的下標，一共有九張照片，下標從0開始，所以九張照片的下標值分別為0-8，此處我們默認展示第四張照片，所以slideIndex 的初始值置為 3 。另外需要注意的是，slideIndex 是全局變量，所以函數內函數外都可以訪問到，并且只初始化一次。

　　2. 局部變量 animateLength 指的是想要 slideImageLists 運動到的位置，注意要加單位，并且需要賦值給 slideImageList 的 left 屬性。

　　3. jQuery的 animate 方法 ,詳情見下圖：

　　接下來完整地分析一下流程，以點擊左按鈕為例：

　　1. 初始情況下展示第四張圖片，下標為 3 。 ( var slideIndex=3 )

　　2. 給左按鈕綁定一個點擊事件

　　3. 點擊左按鈕的時候，想要展示當前照片的前一張，所以圖片下標需要減去1 ( slideIndex-- )

　　4. 計算 slideImageLists 要移動的位置（ slideIndex * (-600) + "px" ），記得加單位。為什么要乘以 -600 ，首先 600 是一張照片的寬度，上面我們分析過了如果要默認展示第四張照片的話 slideImageLists 的 left 屬性值為 -1800px，同理，點擊左按鈕，想要展示第三張照片，那么此時需要 slideImageLists 的 left 屬性值為 -1200px，所以就是 ( 3 - 1 ) * ( -600 ) + "px"=-1200px 。

　　5. 利用 animate 來執行動畫。將上一步計算出來的值賦值給 slideImageLists 的 left 屬性。注意 animate方法本身就是含有過渡的，所以切記不需要在 slideImageLists 上面再加 transtion 屬性來實現過渡。

　　6. 實現循環輪播的重點來了。以上步驟實現了輪播，但沒有實現循環輪播，回憶我們剛才講的內容，一共有三組 1.jpg、2.jpg、3.jpg 這張照片，默認展示第四張照片，也就是第二組照片中的 1.jpg ，如果點擊左按鈕，會分別展示第一組照片中的 3.jpg 、2.jpg、1.jpg , 假設一直點擊左按鈕，展示到第一張照片，也就是第一組的 1.jpg 的時候，此時圖片的下標 slideIndex 的值為 0 。當此時展示的圖片的下標 slideIndex 的值為 0 并且執行完這個動畫的時候，我們需要做一個操作，將 slideImageLists 的 left 值瞬間改變為 -1800px，這個值我們上面強調過了，是初始情況下展示第四張照片也就是第二組中的 1.jpg 的時候 slideImageLists 的 left 值，并且將當前展示的圖片的下標 slideIndex 的值變為 3 。

　　animate有一個非常方便的地方在于他提供了一個回調函數，回調函數在動畫執行完之后自己執行。

　　另外，這里還有一個需要格外注意的地方，我們一直強調一定要瞬間將 slideImageLists 拉回到 left 值為 -1800px 的地方，那是因為如果也類似于用animate來實現的話用戶會看到一個動畫的過程，這是我們不能接受的。所以在瞬間拉回的時候我采用的是jQuery的css方法去改變 left 屬性。

　　不完美的地方

　　但是講到這里，實際上還是有不完美的地方，如果你多次點擊按鈕，就會發生錯亂，此時我們需要做的是在動畫的執行過程中點擊按鈕無效，只有動畫結束完成才可以繼續點擊實現動畫。我這里采用的方案是引入一個布爾類型的變量 isClickable，初始值為true，表示初始情況下可點擊。當用戶點擊按鈕的時候會進行判斷當前 isClickable 的值，如果值為true的時候才會去執行 slideIndex-- 的操作，否則會 return false ,不會再執行下面的代碼。

　　此時我們來分析一下流程：

　　1. 初始情況下isClickable的值為true，表示當前按鈕是可以點擊的。

　　2. 此時我們去點擊左按鈕，isClickable 的值為 true , 會執行slideIndex-- 的操作。并且將 isClickable的值設置為 false，表示現在已經處在動畫中。此時再去點擊左按鈕就無法再執行slideIndex--的操作，而是進入 return false，終止當前代碼。

　　3. 需要注意的是，我們需要在動畫執行完成后，也就是在回調函數中將 isClickable 的值變為 true，所以當動畫結束后再點擊按鈕的時候就可以進行下一次動畫了。

　　具體代碼如下：

var isClickable=true;   // 是否可點擊，默認可點擊
var slideIndex=3;   
$("#slideLeftBtn").on("click",function(){
    if(isClickable==true){
        slideIndex--;
    }else{
        return false;
    }
    isClickable=false;
    var animateLength=slideIndex * (-600) + "px";
    $(".slideImageLists").animate({"left":animateLength},"slow",function(){
        isClickable=true;
        if(slideIndex <=0){
            $(".slideImageLists").css({"left":"-1800px"});
            slideIndex=3;
        }
    });
})

xxxxxxxxxxbr var isClickable=true;   // 是否可點擊，默認可點擊brvar slideIndex=3;   br$("#slideLeftBtn").on("click",function(){br    if(isClickable==true){br        slideIndex--;br    }else{br        return false;br    }br    isClickable=false;br    var animateLength=slideIndex * (-600) + "px";br    $(".slideImageLists").animate({"left":animateLength},"slow",function(){br        isClickable=true;br        if(slideIndex <=0){br            $(".slideImageLists").css({"left":"-1800px"});br            slideIndex=3;br        }br    });br})

　　以上就是左按鈕點擊時候的思路，點擊右按鈕的思路和點擊左按鈕的思路是一樣的，相信聰明的你一定能夠一點即通，有問題歡迎大家和我交流。

　　祝工作順利 ~

限輪播圖效果

<!DOCTYPE html>

<html>

<head>

<title>50-jquery無限循環滾動圖片</title>

margin: 0; /*外邊距：0*/

padding: 0; /*內邊距：0*/

}

div{

width: 600px; /*寬：600*/

height: 160px; /*高：160*/

border: #000000 solid 1px; /*邊框：黑色實線 1像素*/

margin: 100px auto; /*外邊距：上100像素左右自動居中*/

position: relative; /*定位：相對定位*/

overflow: hidden; /*溢出：隱藏*/

}

ul{

list-style: none; /*列表樣式：無點*/

width: 2100px; /*寬：2100*/

height: 160px; /*高：160*/

}

ul>li{

float: left; /*浮動布局：左浮動*/

}

</style>

$(function(){

var pianyi=0; // 定義一個偏移量為0

var timer=setInterval(function(){ // 定義一個定時器 50毫秒調用一次

if(pianyi>-1500){ // 如果偏移量大于 -1500

$('ul').css('margin-left', pianyi) // 把ul的樣式的左邊距設置成偏移量

pianyi -=5 // 偏移量每次減5

}else{pianyi=0} // 否則（偏移量等于0）

}, 50)

})

</script>

</head>

<body>

<div>

</ul>

</div>

</body>

</html>

言

js2flowchart 是一個可視化庫，可將任何JavaScript代碼轉換為漂亮的SVG流程圖。你可以輕松地利用它學習其他代碼、設計你的代碼、重構代碼、解釋代碼。這樣一個強大的神器，真的值得你擁有，看下面截圖就知道了，有沒有很強大。

Github

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

安裝使用

安裝

yarn add js2flowchart

使用

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>fly測試</title>
</head>
<body>
 <div style="width:50%;float:left">
 <p id="svgImage"></p>
 </div>
 <div style="width:50%;float:left">
 <textarea name="" id="jsContent" style="width: 90%;height:900px" oninput="createSVG()">
 </textarea>
 </div>
 <script src="./node_modules/js2flowchart/dist/js2flowchart.js"></script>
 <script src="./index.js"></script>
</body>
</html>

index.js

createSVG=()=> {
 document.getElementById("svgImage").innerHTML=null;
 let code=document.getElementById("jsContent").value;
 const { createFlowTreeBuilder, createSVGRender }=js2flowchart;
 const flowTreeBuilder=createFlowTreeBuilder(),
 svgRender=createSVGRender();
 const flowTree=flowTreeBuilder.build(code),
 shapesTree=svgRender.buildShapesTree(flowTree);
 const svg=shapesTree.print();
 document.getElementById("svgImage").innerHTML=svg;
};
createSVG();

我們直接在文本域中輸入自己的代碼，如下，左邊會直接生成流程圖，這只是一個簡單的示例：

js2flowchart的特性以及適用場景（來自官網翻譯）

js2flowchart獲取您的JS代碼并返回SVG流程圖，適用于客戶端/服務器，支持ES6。

主要特點：

定義抽象級別以僅渲染導入/導出，類/函數名稱，函數依賴性以逐步學習/解釋代碼。
自定義抽象級別支持創建自己的抽象級別
表示生成器，以生成不同抽象級別的SVG列表
定義流樹修改器以映射眾所周知的API，例如[] .map，[]。forEach，[] .filter到方案上的循環結構等。
銷毀修飾符，用于在方案上用一個形狀替換代碼塊
自定義流樹修改器支持創建自己的流修改器
流樹忽略過濾器完全省略一些代碼節點，如日志行
聚焦節點或整個代碼邏輯分支突出顯示方案的重要部分
模糊節點或整個代碼邏輯分支以隱藏不太重要的東西
定義的樣式主題支持選擇您喜歡的樣式
自定義主題支持創建自己的主題，更好地適合您的上下文顏色
自定義顏色和樣式支持提供方便的API來更改特定樣式而無需樣板

用例場景：

通過流程圖解釋/記錄您的代碼
通過視覺理解學習其他代碼
為有效JS語法簡單描述的任何進程創建流程圖

以上所有功能可以直接到github上詳細了解，用法太多，這里就不在介紹了！

vscode擴展

這么強大的東西，有人肯定說如果在開發的時候實時看到流程圖有助于理解代碼，官網提供了插件（我在最新版中測試失效了，不知道是否是我使用的有問題還是插件本身的問題），如果感興趣的可以到擴展商店搜索code-flowchart。如果測試成功，歡迎到評論區分享。以下是我vscode版本和官網的插件使用截圖。

如果利用好這個插件，可以開發出Chrome插件，以及其他JavaScript編輯器或者IDEA的插件，由于官方github已經幾個月沒更新了，所以還不知道未來會不會支持！

總結

js2flowchart是一個比較實用的Javascript插件，可以用來做很多事情，不管是自己寫代碼。還是閱讀別人的代碼，都無疑是一大助力，能夠幫助我們提升我們的代碼能力，更容易的閱讀代碼，這樣學習起來就快了，希望對你有所幫助！如果有什么好的建議，也可以到評論區分享！

在線咨詢

上一篇：很多都免費！全球頂級劇院線上好戲攻略在此
下一篇：jquery版小型婚禮（可動態添加祝福語）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

利用JavaScript jQuery實現圖片無限循

言

1. 效果展示

2. 原理分析

3. 代碼

不完美的地方

言

Github

安裝使用

js2flowchart的特性以及適用場景（來自官網翻譯）

vscode擴展

總結

您的項目需求

　　1. 效果展示

　　2. 原理分析

　　3. 代碼

　　不完美的地方