原理：
一系列的大小相等的圖片平鋪，利用CSS佈局只顯示一張圖片，其餘隱藏。通過計算偏移量利用定時器實現自動播放，或通過手動點擊事件切換圖片。
html：
<code>/<code>
![4]()
container是顯示圖片的區域，list放了所有圖片，buttons是最下方的5個小圓點，prev，next是左右翻頁按鈕
<code><style><br> * {<br> margin: 0;<br> padding: 0;<br> }<br><br> body {<br> padding: 20px;<br> }<br><br> #container {<br> position: relative;<br> width: 600px;<br> height: 900px;<br> border: 3px solid #333;<br> overflow: hidden;<br> margin: 0 auto;<br> }<br><br> #list {<br> position: absolute;<br> z-index: 1;<br> width: 4200px;<br> height: 900px;<br> }<br><br> #list img {<br> float: left;<br> width: 600px;<br> height: 900px;<br> }<br><br> #buttons {<br> position: absolute;<br> left: 250px;<br> bottom: 20px;<br> z-index: 2;<br> height: 10px;<br> width: 100px;<br> }<br><br> #buttons span {<br> float: left;<br> margin-right: 5px;<br> width: 10px;<br> height: 10px;<br> border: 1px solid #fff;<br> border-radius: 50%;<br> background: #333;<br> cursor: pointer;<br> }<br><br> #buttons .on {<br> background: orangered;<br> }<br><br> .arrow {<br> position: absolute;<br> top: 450px;<br> z-index: 2;<br> display: none;<br> width: 40px;<br> height: 40px;<br> font-size: 36px;<br> font-weight: bold;<br> line-height: 39px;<br> text-align: center;<br> color: #fff;<br> background-color: RGBA(0, 0, 0, .3);<br> cursor: pointer;<br> text-decoration: none;<br> }<br><br> .arrow:hover {<br> background-color: RGBA(0, 0, 0, .7);<br> }<br><br> #container:hover .arrow {<br> display: block;<br> }<br><br> #prev {<br> left: 20px;<br> }<br><br> #next {<br> right: 20px;<br> }<br>/<style>/<code> container 寬高設為一張圖片的大小 overflow: hidden;控制只顯示當前圖片
list height為圖片高度，width設為圖片高度*圖片張數
確保buttons中每個span所在層置頂，將其設置為最頂端。設置為z-index:2
js:
list初始left:0px默認顯示第一張圖片，js就是操作left來改變當前顯示的圖片，右切就left-圖片寬 左切就是left+圖片寬。然後注意就是圖片是可以循環切換，第一張左切就是最後一張，最後一張右切就是第一張。
<code>//圖片寬度
const width = 600;
//圖片張數
const pages = 5;/<code>
功能1：手動點左右箭頭切換圖片，就是左切-圖片寬，右切+圖片寬
<code>function animate(offset) {
var newLeft = parseInt(list.style.left) + offset;
if (newLeft > 0) {
list.style.left = -width * 4 + 'px';
} else if (newLeft < -width * 4) {
list.style.left = 0 + 'px';
} else {
list.style.left = newLeft + 'px';
}
}/<code>功能2：自動播放，自動播放就是加一個定時器，自動的右切，利用左切、右切很好實現。同時要注意的是鼠標放在圖片上面時，不能切換，就是關掉定時器，鼠標移走，定時器開啟
<code>function play() {
timer = setInterval(function () {
next.onclick();
}, 2000)
}
function stop() {
clearInterval(timer);
}
container.onmouseover = stop;
container.onmouseout = play;/<code>功能3：點擊下方圓點，切換到對應的圖片。利用圓點的index屬性確定要切到哪一張圖片，當前圖片用index記錄，這樣就可以計算出偏移量利用animate函數就可以切換到對應圖片了。
<code>for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
var clickIndex = parseInt(this.getAttribute('index'));
var offset = width * (index - clickIndex);
animate(offset);
index = clickIndex;
buttonsShow();
}
}/<code> 想看完整代碼打開https://cocosilent.gitee.io/static/html/index.html直接F12 看源代碼，或者點擊瞭解更多。
分享到:
閱讀更多 前端全棧 的文章
