国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

實例

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

我的思路如上

<p class="view">
    <p class="container">
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
        <p class="item"></p>
    </p>
</p>

CSS重點在于 設(shè)置 .view 的 overflow-x 為 hidden

還有 .container 的 absolute

這樣就可以把 .container left變化 轉(zhuǎn)化成 看起來就像滾動一樣

現(xiàn)在的問題就是讓中間那個變大一些

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

一切準(zhǔn)備工作做好后：

1. 把問題轉(zhuǎn)化成數(shù)據(jù)問題

2. 把數(shù)據(jù)渲染出來

// box.js 
var Box = (function(){
    var container = $('.container'); 
    var items = $('.item'); // 假設(shè)已經(jīng)有一個已經(jīng)變大了 
    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 
    }
})(); 

都準(zhǔn)備好之后把暴露出來的 next pre render 綁定到對應(yīng)的按鈕上

PS：pre, next 改變了數(shù)據(jù)之后記得還要 render 渲染

需要的基礎(chǔ)知識

1. CSS overflow, absolute width 等等基礎(chǔ) CSS 姿勢

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

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

百度找插件 網(wǎng)上到處都是