关于图片轮播的几种思路
图片轮播我们经常在众多网站中看到,各种轮播特效在有限的空间上展示了几倍于空间大小的内容,并且有着良好的视觉效果。很多初学js的小伙伴都会拿这个来练习。我也不例外,所以在此分享几个我写轮播图的过程,代码不足之处请多指教哦,相互学习。
好了,先来说第一种轮播特效:
就是通过修改每一张图片的透明度,让其每隔一段时间将其中的某一张图片透明度设为1,而其它的设为0,从而实现一种图片轮流播放的效果。
这种效果的思路比较简单,首先让一组图片绝对定位,让其重叠在一起,然后通过一个函数来控制图片的透明度变化。同时还有一个定时器,不停的除发这个函数,每次改变不同图片的透明度,让其显示。(更简单的效果是直接修改display属性,让该显示的图片display:block,而不显示的设为display:none就可以,只是效果上会差一些,但原理相同)
首先来看Html结构代码:
对其进行样式调整之后,图片都在同一个位置,可以先给第一张图片设置为显示,而其它的图片设为不显示。
下面来看js的代码:
这样调用该插件即可:autoplay.js是我将这个插件保存到本地的一个文件。
这里面实现的时候结合了css3的transition属性,让代码更简洁,动画效果也更好。关于transition的兼容我代码中并没有加前缀,需要的小伙伴们可以自行加上,这里只演示一个实现过程。
第二种轮播特效:
这一种是滑动形式的,通过改变元素的left值让图片呈现左右滚动的效果。
html结构式这样子的:
js插件代码是这样子的:
插件的调用方式和上面第一种的一样,因为原理都差不多,同样结合了css3的动画实现,所以就不赘述原理了。
还有一种是无缝轮播方式,就个人感觉这种的显示效果最好。