效果圖：

點擊左右輪播按鈕，實現圖片滾動

第一種實現方式

列表li列表頭部和尾部放置一個節點：

1. 首先獲取元素集合及位置集合【每個號碼牌的定位width,height,left,top信息】放到json中

2. 然后在右按鈕點擊后，將元素集合頭元素移至尾部，然后根據位置集合對應每個元素重新渲染位置，就會出現移動的效果

3. 但是這個問題是當10號碼牌移動到尾部時，會出現穿透效果，也就是10會平移到9的位置上

4. 解決辦法：當新位置為0的時，將display設為none,然后讓其運動到尾部，再在animate()函數回調函數上，將元素display:block就可以了。

for (var i = 0; i < arr.length; i++) {if (i == 0) {arr[i].css("display", "none").animate(SEAT[i], function() {$(this).css("display", "block");});} else {arr[i].animate(SEAT[i]);} }

左按鈕類似，不再贅述。

第二種方案

如果頭部不讓放一個預置節點，如圖：

在點擊右按鈕下，將新位置為0的元素隱藏然后運動在左側虛擬位置，元素顯示，然后進行動畫，將元素從虛擬位置移動到0的位置上，代碼如下：

for (var i = 0; i < arr.length; i++) {if (i == 0) {arr[i].css({"width": 70,"height": 50,"left": -120,"right": 50}).animate(SEAT[i]);} else {arr[i].animate(SEAT[i]);} }

先讓最后一個節點設置到虛擬頭節點，然后進行動畫移動到0的位置。

點擊左按鈕，將當前0節點【變為最后一個節點】動畫到虛擬頭節點位置，然后設置樣式到最后即可

for (var i = 0; i < arr.length; i++) {if (i == 10) {arr[i].animate({"width": 70,"height": 50,"left": -120,"right": 50}, function() {arr[10].css(SEAT[10]);});} else {arr[i].animate(SEAT[i]);} }

回調函數中無法獲取最新的index值，所以以上代碼使用固定變量獲取，也可以通過IIFE解決：

if (i == 10) {(function() {var a = i;arr[i].animate({"width": 70,"height": 50,"left": -120,"right": 50}, function () {arr[a].css(SEAT[a]);});})(i); } else {arr[i].animate(SEAT[i]); }

?

最后吐槽一個csdn這個編輯器，是真的爛

總結

以上是生活随笔為你收集整理的异形滚动轮播图---jquery实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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