如上图设计原型，网上找不到类似的轮播插件。
尝试自己制作，没有较好的js思路。
毕竟它跟大多数的轮播图有点差距：
1、首屏显示了三张图片。
2、左右图片仅显示一部份，如左图隐藏了左边部分，右图隐藏了右边部份。
3、每张图片之间均有一定的间距。
4、中间的大图比两边的图片显示尺寸变大。（所有图片都是16:9)
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
11
1061
收藏
思路和普通轮播是一样的
想办法给居中图片加上scale()
轮播图插件的话，可以百度swiper，设置slidesPerView，来确定图片显示个数。额，设置两边显示部分图片？可以参考swiper源码，应该是设置 loop模式，slidesPerView设为auto吧。。。记不太清楚了，可以去swiper中文官网看一下
轮播图 网上有很多插件 可以去找找
像
swipe swiper superSlide等等 有很多轮播图 原理都是一样的 你只要会写一种 另一种也就会了
网上如果没有你需要的这种插件的话 你可以自己写一个轮播图
这个 也就是一个大的
p包含一个ul然后显示 几个li每个
li里边有一张图片然后在设置初始位置的时候
你设置整个
ul的left为li的(-width/2)也就是整个ul向左挪动一段距离然后再用按照常规的轮播图 的做法
用
setInterval控制 运动 就可以了插件到处都是 自己找 不要说没有
网上各种轮播图的源码都有很多啊，php中文网下载站
1、首屏显示3张图片
2、左右各显示一部分
3、每一张图片有间距
4、中间的大图
总的来说，如果能在看到多张图片，那么它的margin或者是left的值比较小，使得非当前图片也会看到；如果值比较大，已经超过内容块了，那么你始终只有看到一张图片。
现在用纯css就可以实现了
思路：
1、确定总数：
你需要复制藏在背后的图片，比如轮播三张，这样是为了应付左右移动时图片过渡的情景，在左右要各自多复制一张图片。 顺序是 3,1,2,3,1；
2、图片布局：
第一张图片的定位，每一张的间隔控制好，上面说的三张图片，最左的3和最右的1隐掉这样只能看到中间的，1,2,3;
3、动画控制：
在图片上做一个框，框内的显示，框外的不显示；
用css3的动画控制移动动画，动画要控制要做的最主要是对当前索引的控制；当前是什么，上一张是什么，下一张是什么，每次动画左右肯定有一张图片移动，比如，3,1,2,3,1 变成 1,2,3,1,2 或 2,3,1,2,3。 这其中开始、中间、结束都有状态变化，这时候做好状态以及doc的控制。
做好以上三步差不多就出来这个效果，后期就是一些微调，比如动画时间快慢等细节的控制；