Element UI的走馬燈有類似效果，可以參考。 （見最下[卡片化]效果）

實例

1.像輪播圖一樣，最後加上一個跟第一個一模一樣的。例如1234561這種結構。
2.最大的效果有兩種，一種是整體放大，一種是只放大高和寬內容不變。前者用scale，後者直接改寬高。

我的思路如上

CSS重點在於 設定.view的overflow-x为hidden

還有.container的absolute

這樣就可以把.containerleft變化 轉換成看起來就像滾動一樣

現在的問題就是讓中間那個變大一些

按套路來講，還需要寫.iambig作為變大後的樣式

---

一切準備工作做好後：

1. 把問題轉換成數據問題

2. 把資料渲染出來

// box.js var Box = (function(){ var container = $('.container'); var items = $('.item'); // 假设已经有一个已经变大了 var isBig = items.map(item => { return item.hasClass('iambig'); }); // 把item映射成isBig // 比如第一个的item的类是 'item iambig' // 那么 isBig 将会是 // [true, false, false, false, false] var next = function(){ // 最后一个吐出来插到最前面 var last = isBig.pop(); isBig.unift(last); } var pre = function(){ // 最前面站出来插到最后面 var first = isBig.shift(); isBig.push(last); } var render = function(){ items.removeClass('iambig'); // 大家都去掉 iambig isBig.forEach((e, i)=>{ if (e) { $(items[i]).addClass('iambig'); container.css(left, i); // 这个让他滚动。。。 这个得看情况弄了 这个值可以是百分比也可以是px 。。。 看你具体需求了 } }) } return { next: next, pre: pre, render: render } })();

都準備好之後把暴露出來的 next pre render 綁定到對應的按鈕上

PS：pre, next 改了資料之後記得還要 render 渲染

---

需要的基礎知識

1. CSS overflow, absolute width 等等基礎 CSS 姿勢

2. Array.prototype.forEach、jQuery的常用方法等等

= = 。 。 。 。 希望能幫到你。

百度找插件 網路上到處都是