图片轮播的方式有很多种,下面我们使用js原生代码来写出其中一种方式——左右滑动效果。
js原生和jQuery、还有Css都可以实现这个效果,jQuery因为封装了很多用法,所有使用起来
很简单、也方便了许多,其实也就是用js原生模拟出的这些用法。不管怎样,构造出一个基本的表现层那是必须的。
对于左右滑动效果轮播:
1.首先是外围部分跟图片组,外围部分宽高度只是你轮播的大小,而图片组需要设置你图片组里面全部加起来的宽度。因为需要左右滑动效果。所以运用了左浮动(float属性),将图片并排显示。
再通过超出范围隐藏(overflow属性),将超出外围盒子范围的图片隐藏。
为什么我的轮播只有五张图片,但图片组宽度我设置多了两张图片的位置呢? 因为还要设置附属图,才能无限循环的切换图片。图片组第一张图片要放最后一张图片的附属图,同样图片组的最后一张图片要放的第一张图片的附属图。因为现在第一张图是附属图,所有最后还需要给图片组像右边移动1000px,让第一张图在轮播上显示出来。