GitHub預覽：https://luckzhu.github.io/slide-seam/
代碼：https://github.com/luckzhu/slide-seam

實現(xiàn)思路
多張圖片并排形成一張長圖
顯示窗口只有一張圖片大小
點擊后圖片位置變化贰健，達到輪播效果

初步顯示
<img>標簽引入多張圖片辟癌，注意寬高要一致
<div>做顯示窗口逾雄，overflow: hidden; 隱藏其它未顯示的圖片
html代碼：

<div class="slide">
        <div class="window">
            <div class="images">
                <img src="./images/1.jpg" alt="圖片" width="400">
                <img src="./images/2.jpg" alt="圖片" width="400">
                <img src="./images/3.jpg" alt="圖片" width="400">
                <img src="./images/4.jpg" alt="圖片" width="400">
            </div>
            <ul class="buttons">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>

點擊圖片移動
用jQuery，$(selector).on("click",function(){})鼠標點擊后執(zhí)行圖片切換

如何確認是第幾張？
$(x.currentTarget).index()可得到點擊元素在siblings中排第幾

圖片如何移動耘子？
假設(shè)圖片寬度位300px，比如點擊第一張，translateX就變?yōu)?佛猛，點擊第二張translateX就變?yōu)?300px，那么點擊第n張即變?yōu)?n* -300坠狡，也就是index * -300

如何讓他自動輪播继找？
讓他自動觸發(fā)“click”事件
setInterval(function(){ }, 3000)，寫成箭頭函數(shù)即是：setInterval(() =>{ }, 3000),每隔3秒執(zhí)行一次逃沿。Tips: setInterval()方法會不停地調(diào)用函數(shù)婴渡，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。如果只想調(diào)用一次凯亮，可以用setTimeout()方法

自動選擇圖片边臼，觸發(fā)click
$().eq(index).trigger('click')，這里的 index 應改為n=0假消，n+=1柠并， n % images.length。即從1，2臼予，3鸣戴，4逐個開始。

為什么不直接用1粘拾，2窄锅，3，4缰雇？
為了不寫死入偷，為了無論多少張圖片，代碼都不用改械哟。

若當前用戶點擊了第3張疏之，輪播也應從第3張開始自動，而不是第一張開始戒良？
所以這里當用戶手動點擊過后体捏，應當將此時的index賦值給n

當用戶鼠標移上去后，自動輪播應該相應停止
$(.windows).on('mouseenter',function(){ window.clearInterval(timerId)} )
這里的 .windows 是一個css選擇器糯崎，是指整個輪播對象几缭，timerId 即為之前setInterval()取得計時器名字

同樣的，當用戶鼠標移出來之后沃呢，自動輪播也應相應開始
$(.windows).on('mouseleave',function(){ timerId = setInterval(function(){ }, 3000) )

其他效果實現(xiàn)
當輪播到第幾張時年栓，第幾張的標簽就變色，即高亮薄霜。
.addClass('blue')給當前的標簽增加 class
.siblings('.red').removeClass('blue')給當前標簽的兄弟移除class

代碼優(yōu)化
重復的地方 封裝函數(shù)