这个效果一般称为图片轮播，实现的方法有很多，像b站的这种较为简单，可以用css3来实现。
以4张图片为例：
1.基本布局：
将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，
相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。
2.设置动画：
然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。
4张图片，需要切换3次.
根据需要可以对各个图片添加相应的序号和图片简介。
3.代码如下：
<div id="frame" ><div id="photos" class="play">
<img src="images/1.jpg" >
<img src="images/3.jpg" >
<img src="images/4.jpg" >
<img src="images/5.jpg" >
<ul id="dis">
<li>111111111111111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div>
</div> 1 <style>
2 #frame{position:absolutewidth:300pxheight:200pxoverflow:hiddenborder-radius:5px}
3 #dis{position:absoluteleft:-50pxtop:-10pxopacity:.5}
4 #dis li{display:inline-blockwidth:200pxheight:20pxmargin:0 50pxfloat:lefttext-align:centercolor:#fffborder-radius:10pxbackground:#000}
5 #photos img{float:leftwidth:300pxheight:200px}
6 #photos { position: absolutez-index:9 width: calc(300px * 4)/*---修改图片数量的话需要修改下面的动画参数*/ }
7 .play{ animation: ma 20s ease-out infinite alternate}
8 @keyframes ma {
9 0%,25% { margin-left: 0px }
10 30%,50% { margin-left: -300px }
11 55%,75% { margin-left: -600px }
12 80%,100% { margin-left: -900px }
13
14 }
15 </style>
简单demo：使用HTML+CSS 实现轮播图（三张图为例，分别为：红、绿、蓝）的效果。
不能发视频，截图来代替吧
1.显示 轮播图1（实际轮播的第2个元素li）
2.显示 轮播图2（实际轮播的第3个元素li）
3.显示 轮播图3（实际轮播的第4个元素li）
4.显示 轮播图1（实际轮播的第5个元素li,之后会紧跟着重复以上动作）
问题一：广告轮播是什么意思 不是特专业的说，轮番有N面翻和上下翻的，常见的就是2面翻，伐是你打开一个页面，刷新一下就会出现新的，也可以等一会，广告条会自动翻过来。至于你说的1/5轮番的，我还没见到过。
问题二：什么是“轮播频道” 轮播频道就是分时段重播时下精彩剧集（一般是没有广告的，每个时段不同剧集，方便那些错过自己喜欢的节目的人观看。
问题三：哔哩哔哩直播里的轮播是什么意思 所谓轮播就是同一套节目以一定时间间隔(如10分钟)采用多个频道进行循环播放，用户通过频道选择来达到前进后退的视频点播效果。片源一般放在运营商的IPTV平台中。这种业务也是传统直播业务的改良形式，是介于点播和直播的一种播放方式，特别适合于热门新片播放和热点事件报道，以求在短时间内有效分流业务和扩充服务能力。
问题四：广告位12轮播是什么意思 12轮播或者4轮播 你看出来了。都是焦点图。也就是说这个位置有12个焦点图或者4个焦点图，他们是自动翻页轮播的。那么流量理应是1/12或者1/4 比如12秒内轮播4则焦点图，每个焦点图是3秒停留。那么你的广告就是3秒的流量啊。
50%我觉得这里可以理解成是2轮播。就是这个位置除了你的广告可能会出现另外的广告主的广告。你们共享这个位置，那么就是50%的流量。
问题五：什么是轮播桌面？ 看着自己的指甲
那么恶心，心都烦死了。那时候经常去网上看
网友写的文章。有一天，看到小谭的文章
她的经历跟我的很相似，而且她的已经弄好了
就抱着一份希望跟她聊 ，才知道选对药是关键。
如果你想知道怎么弄好的，可以问问咯。
问题六：机顶盒轮播是什么意思 一个播放完了再播放另一个
问题七：jquery 图片轮播 代码什么意思啊 太长了，哪行不懂个别问吧
问题八：什么是轮播图 钻石展位图 轮播图：这个是以实际出现的状态而产生的词组，轮：轮换，轮留，流动，播：播放，放映，展示，就是在网站或现在生活中醒目的位置，做一个区域做几张不同品牌或公益的广告，以轮换播放的方式，进行展示的过程。
展位图：就是您的公司或是产品，在地理位置或是柜台里面，您所认为美观大方，让别人对你的寻找方便程度的说明和摆放，有利于办事和做生意的最好手段。
【奢华珠宝】友情帮助
问题九：网站广告中的30轮播、18轮播 是什么意思 轮播广告即在某一个广告位同一天会有N个广告轮流播放，第一个出现的广告是随机的，每刷新一次都会换一个广告，以此类推。从而保证每一个广告的出现次数基本相同。
问题十：纯CSS 能写出网站的轮播吗 css3 可以
zhihu/question/20018850
