La lanterne tournante d'Element UI a des effets similaires, vous pouvez vous y référer. (Voir l'effet [carte] du bas)

Exemples

1. Comme sur l'image du carrousel, ajoutez-en une à la fin qui est exactement la même que la première. Par exemple, cette structure est 1234561.
2. Il existe deux effets principaux, l'un consiste à agrandir l'image entière et l'autre à agrandir uniquement le contenu en hauteur et en largeur sans modification. Le premier utilise l’échelle et le second modifie directement la largeur et la hauteur.

Mes pensées sont comme ci-dessus

<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>

Le point clé de CSS est de définir le overflow-x de .view sur hidden .view 的 overflow-x 为 hidden

还有 .container 的 absolute

这样就可以把 .container left变化 转化成 看起来就像滚动一样

现在的问题就是让中间那个变大一些

按套路来讲，还需要写 .iambig

De cette façon, le changement de gauche .container peut être converti en

1. Le problème maintenant est d'agrandir celui du milieu

Selon la routine, vous devez également écrire .iaambig comme style agrandi

2. Une fois tous les préparatifs terminés :

// 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 
    }
})(); 

Une fois que tout est prêt, liez le prochain pré-rendu exposé au bouton correspondant

1. PS : Avant, n'oubliez pas ensuite de faire le rendu après avoir modifié les données

2. Connaissances de base requises

Recherchez les plug-ins sur Baidu, ils sont partout sur Internet