前言
作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播。做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单。但轮播插件这种东西总归是不灵活的,一些简单的场景还可以应付,比较复杂一点的场景处理起来就比较麻烦了。今天我会全程带大家来写一个循环轮播,用到的技术有:html、css、JavaScript、jQuery,都是前端最基础的技术,有基础又爱学肯学的你一定一听就会,如果不会咋整?那多看几遍。?
1. 效果展示
以小米官网的图片轮播为例,实际上千篇一律,好啦,看下图:
好啦,看效果,不要看妹子,虽然妹子长得是很好看啦!
2. 原理分析
无限循环轮播的原理是在展示内容的前后各放一组图片,以无限循环展示3张照片为例,三张图片我给它取名为1.jpg,2.jpg,3.jpg,图片展示分别如下:
原理示意图展示:
原理其实就是复制两组同样的照片分别放在前面和后面(实际上不用完全复制两组,只需要前面可以到1.jpg,后面也可以到1.jpg就好了,但这里我为了方便大家理解,就采用这样的方式了)。当点左边按钮,图片轮播到第一张1.jpg时,让盛放图片的容器瞬间拉回到第二张1.jpg照片的位置,注意一定要是瞬间。同理,当点右边按钮时,图片轮播到第三张1.jpg的时候,也让盛放图片的容器瞬间拉回到第二张1.jpg照片的位置。这是实现图片循环轮播的关键,稍后会仔细讲解。
3. 代码
html代码:
<div class="slideImageContainer"> <div class="slideImageLists"> <img src="1.jpeg" /> <img src="2.jpeg" /> <img src="3.jpeg" /> <img src="1.jpeg"