图片轮播尺寸,淘宝首页图片轮播的尺寸是多少

　　

天天写前端的你，会自己写一个轮播图吗，而且不能用js哦，知道轮播图的原理吗？ 　　

　　

今天我们要讲的是如何只用css实现轮播图效果，也叫"banner"，就是我们经常在APP或网站首页顶部看到的一系列图片切换。就像淘宝官网首页那样： 　　

　　

　　
　　

　　

　　

实现原理 　　

一图胜千言，先上图： 　　

　　

　　
　　

　　

　　

　　

解释一下，轮播图并排排列，组成一张很宽的图片，而手机屏幕宽度是固定的，这样每过一段时间，我们把宽的图向左平移一些距离，一般是平移一个屏幕宽度，比如屏幕宽320px，就平移320px，这样就达到了切换图片的目的。 　　

　　

　　
　　

　　

注意点，由于每次都平移一个手机宽度，即每张轮播图要适应手机的尺寸，所以UI在做图的时候要考虑这点，不然显示的图片很丑。 　　

　　

　　
　　

#0把图片水平排列 　　

　　
　　

　　

html代码如下： 　　

　　 　　 　　 　　1 　　2 　　3 　　4