先從普通輪播說起（自動播放功能後面實作）
<body>
<div class="window">
<div class="slides" id="slides">
<img width="250" height="375" src="./1.jpg" alt="">
<img width="250" height="375" src="./2.jpg" alt="">
<img width="250" height="375" src="./3.jpg" alt="">
</div>
</div>
<div id="buttons" class="buttons">
<span>1</span>
<span>2</span>
<span>3</span>
</div></body> 最簡單的點選按鈕切換圖檔很簡單。
給按鈕添加click事件監聽，改變圖檔的translateX。當然如果想要輪播圖從上到下播放，相應的改變translateY就行。
let $buttons = $('#buttons>span')
let $slides = $('#slides')$buttons.eq(0).on('click',function(){
$slides.css({transform:'translateX(0px)'})
})
$buttons.eq(1).on('click',function(){
$slides.css({transform:'translateX(-250px)'})
})
$buttons.eq(2).on('click',function(){
$slides.css({transform:'translateX(-500px)'})
}) 這個方案從最後一張到第一張時，或者從第一張到最後一張時，一定會經過中間的圖檔，無法做到無縫輪播。
我們使用讨巧的辦法，在第一張前面隐藏最後一張圖檔的複制，最後一張後面隐藏第一張的複制，這樣在最後一張時點選下一張就能到第一張，但這個時候需要把假冒的第一張狸貓換太子，變成真的第一張不然就穿幫了。
let $firstCopy = $images.eq(0).clone(true)
//clone()可選布爾值。規定是否複制元素的所有事件處理。
let $lastCopy = $images.eq(2).clone(true)
$slides.append($firstCopy)$slides.prepend($lastCopy) 既然增加了兩張圖檔，相應的位置也要做一些調整。把複制的最後一張圖檔隐藏掉
$slides.css({transform:'translateX(-250px)'}) 接下開就是位置檢測，給三張圖檔添加标記
let current = 0
$buttons.eq(0).on('click',function(){
$slides.css({transform:'translateX(-250px)'})
current = 0
})
$buttons.eq(1).on('click',function(){
$slides.css({transform:'translateX(-500px)'})
current = 1
})
$buttons.eq(2).on('click',function(){
$slides.css({transform:'translateX(-750px)'})
current = 2
}) 當current值為2（第三張）同時按鈕1被點選時，為了達到無縫效果，需要播放下一頁，露出copy的第一張。
$buttons.eq(0).on('click',function(){
if(current === 2){
$slides.css({transform:'translateX(-1000px)'})
}else{
$slides.css({transform:'translateX(-250px)'})
current = 0
}}) 現在把copy的第一張變成真正的第一張。
$buttons.eq(0).on('click',function(){
if(current === 2){
$slides.css({transform:'translateX(-1000px)'})
.one('transitionend',function(){
$slides.addClass('hide')
$slides.css({transform:'translateX(-250px)'})
.offset()
$slides.remooveClass('hide')
current = 0
})}else{
$slides.css({transform:'translateX(-250px)'})
current = 0
}}) 先将輪播隐藏，然後偷偷地換掉圖檔，offset()會計算元素偏移的位置，隐藏掉圖檔更換的過程。
本文完〜
![JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)