前言

這段時間在做練習的時候遇到了這個要展示多個輪播圖的需求，現在大部分網頁的輪播圖每次都是展示一個的，就算是淘寶、天貓這樣的大網站。一開始在做這個輪播圖的時候在決定跳轉的時刻同時防止用戶短時間內頻繁翻頁這個地方卡了一會，最后終于做出來的時候決定將實現原理分享一下。

首先看一下要實現的效果

如圖，一次性展示5張圖片，向左或向右翻頁時圖片的展示順序是固定的。

本文將使用 JQ 實現這個效果，如果用原生js的話道理也是一樣的，只是會麻煩一點，有興趣的讀者可以自己嘗試一下。

實現原理

圖片位置

其實同時展示多張圖片的輪播圖和一次展示一張 圖片的輪播圖原理類似，也是展示在邊緣圖片還要繼續走之前先將圖片移動到另外一邊

上圖是展示單張頁面的原理圖，當展示圖片為最右邊的 ‘1’ 同時還要向右翻的時候，整個矩形要移動位置，將最左邊的‘1’定位到展示窗口，然后才執行向右翻的操作；
這里為了實現無縫輪播一定要在‘頭’之前銜接‘尾’，要在‘尾’之后銜接頭；

而要實現多張圖片的無縫輪播道理也是相似的

比如說，要實現同時展示五張圖片的無縫輪播，就以五張圖片為整體，將3個整體合并起來；
當展示窗口移動到最左邊的時候還要向左翻頁，那在翻頁前先將‘矩形’的中間整體定位到展示窗口，然后再執行向左翻的操作；向右翻操作同理；

防止用戶短時間內進行多次翻頁

我實現這個功能的方法是給定一個用于判定是否可以翻頁的變量，當變量為 true 時可以執行翻頁，當變量為 false 時禁止翻頁，當翻頁這個動作結束時再將該變量設置為 true。

具體代碼

html

<div class="pic"><ul class="carousel clear"><li><a href="#"><img src="./images/work/_pic1.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic2.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic3.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic4.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic5.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic1.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic2.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic3.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic4.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic5.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic1.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic2.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic3.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic4.jpg" width="100%" alt=""></a></li><li><a href="#"><img src="./images/work/_pic5.jpg" width="100%" alt=""></a></li></ul><div class="leftArrow"></div><div class="rightArrow"></div></div>

js

$(function () {var carousel = $('.carousel'),clickable = true,timer// 自動輪播函數function autoRun() {timer = setInterval(function () {if( parseInt(carousel.css('left')) <= -1860 ){carousel.css('left', '-930px')}animate(-1)}, 3000)}// 剛打開頁面時執行autoRun()$('.leftArrow').click(function () {// 防止用戶瘋狂點擊翻頁if(clickable){clickable = false// 當展示的5張圖片為最左邊的五張圖片同時還要向左翻頁時，重置位置if( parseInt(carousel.css('left')) <= -1860 ){carousel.css('left', '-930px')}animate(-1)}});$('.rightArrow').click(function () {// 防止用戶瘋狂點擊翻頁if(clickable){clickable = false// 當展示的是最右邊5張圖片還要向右 翻頁時，重置位置if( parseInt(carousel.css('left')) >= 0 ){carousel.css('left', '-930px')}animate(1)}});// 切換頁面函數function animate(direction) { // 這里傳入的參數表示翻頁的方向// 這里的 186px 是一張圖片的寬度，因為用戶手動點擊翻頁是隨時發生的// 因此必須在手動翻頁時進行位置的調整var adjustment = parseInt(carousel.css('left')) % 186if( direction === -1 ){ // 向左翻頁carousel.stop().animate({left: '+='+ direction*(186 + adjustment) +'px'}, 1500)} else{ // 向右翻頁carousel.stop().animate({left: '+='+ direction*(186 - adjustment) +'px'}, 1500)}// 翻頁的動畫用時 1.5s， 為了保證‘安全’我將再次點擊許可設置在了 2s 后// 雖然你可能會認為這個有點太簡單暴力了。。我想這個地方用 Promise 來實現可能會優雅一點setTimeout(function () {clickable = true}, 2000)}// 鼠標移入時清除自動輪播的定時器$('.pic').mouseenter(function () {clearInterval(timer)timer = null})// 鼠標移出時開始自動輪播的定時器$('.pic').mouseleave(function () {autoRun()})})

---

當然這個功能的實現方法不唯一，如果你有更好的解決辦法，歡迎私信或在評論區評論~

總結

以上是生活随笔為你收集整理的同时展示多张图片的无缝轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。