展谊Phill
轮播图在我们的web项目中有着广泛的运用，特别是在商城项目中，通常用于对新品、热销、促销等产品的推荐，重要的站点公告也可以采用轮播图的方式呈现。现在实现轮播图有各种各样的第三方插件可以用，哪怕是一个完全不懂javascript或者jQuery的新手，也能实现轮播的效果；但是，作为一个初学者，我们还是要稍微了解一下原理（大神请无视）。
实现轮播的手段其实有很多，比如移动图片的位置、设置图片的显示隐藏等都可以实现轮播切换效果，这里，我们简单演示移动图片距离的方式实现轮播效果。
首先编写html页面并配合简单的css样式，代码如下：
效果如图1所示：
我们实现轮播主要是要横向移动图片的位置，所以要将图片浮动成一排，并且要隐藏多余的部分，只显示出一张图片，补充css如下：
如图2所示：
现在我们只能看到一张图片，其余的因为超出.slider-box的范围而被隐藏，如下图3所示：
其实移动图片的原理很简单，我们只需要不断改变ul的left值就可以，如下图4所示：
现在我们需要使用jQuery来不断的改变这个left值。
首先，引入jquery-3.2.1.min.js；jq代码如下：
刷新页面，效果如图5所示：
但是，图片的切换是一瞬间完成的，而且只有一次，并没有轮播，所以，这并不是我们想要的效果。轮播肯定是有规律的随着时间变化而依次播放，所以，根据之前我们在《javascript动画基础》中讲解的，我们必须结合时间函数以及时间增量完成动画效果。
修改以上jq代码：
效果如图6所示：
现在虽然可以按照时间间隔切换图片，但是在最后一张切换完成后，程序并没有停止或者复位图片，而是继续在向后移动ul，所以出现了空白的情况，因为我们每次移动的距离为1920px刚好为图片的宽度，实际上图片只需要切换2次就可以到达第3张，再切换的话就会出现空白，我们需要先判断left的是否已经为3张图片的宽度总和，即left+5760是否等于0(left为负值)，如果等于0，那么我们需要将ul的left值设置为0，再从头开始切换，修改代码：
效果如图7所示：
现在图片只要切换到最后一张，将不会继续往后切换，而是回到第一张图片，重头切换。我们也可以使用jQuery提供的animate()方法，让我们能看到图片从右向左的切换过程：
效果如图8所示：
那么，一个简单的轮播图，我们就完成了。实现轮播的方式很多，这里只是提供一个最基本的思路。喜欢的朋友可以点个关注，后期我们会放出进阶视频。
相关推荐
-
碳水化合物食物一览表（哪些是碳水化合物食物一览表减肥）
1、面点：馒头、包子、面条、面包、饼干、麻薯等； 2、谷物：米饭、高粱、麦子、薏米、糯米等； 3、根茎蔬菜：芋头、马铃薯、红薯、白薯、山药、板栗等； 4、水果：（大多数会甜的都含有，但水分较多）香蕉、...
-
兰州牛肉面蓬灰怎么制作（兰州牛肉面为什么加蓬灰）
兰州牛肉面属于北方比较知名的一种面食，很多人喜欢吃。兰州牛肉面好吃，除了汤汁鲜美、牛肉爽口之外，最主要的还是面筋道，即使在面汤里泡很长时间，口感还是那样筋道，这是兰州牛肉面最特别的地方。 兰州牛肉面有"...
-
副业做什么好（适合晚上做的25个副业）
很多人朝九晚五的上下班，只有晚上的下班时间才是自己的，学生，宝妈一族也是如此。晚上空闲出来的时候与其空着，不如去做点兼职副业增加收入。那么，有哪些适合晚上做的副业吗？ 有兴趣做副业的同学，可以跟广森有...
-
手机内存不足还卡顿怎么办（10秒教你解决手机内存不足卡顿）
手机使用时间久了，就有可能出现手机内存空间不足的情况，并且还伴随着卡顿现象。这个时候，你是怎样清理手机内存的？是通过手机自带的手机管家来清理垃圾的吗？欢迎大家在视频下方的评论区进行相关的讨论，常言道，...
-
闰秒将在2035年被取消原因是什么呢
世界上最重要的计量机构已经决定，从2035年起将暂停在官方时钟中增加"闰秒"以使其与地球自转同步的做法。11月18日，来自世界各地的政府代表在巴黎郊外举行的计量大会（CGPM）上做出了这一决定。这意味着从2035年开始...
-
阿玛尼粉底液如何选购色号（阿玛尼粉底液选购色号指南）
今天我特地挑出了最热门的3款阿玛尼粉底液。 做了很多功课，给大家献上一份超详细攻略！ 一入权利深似海！这款粉底主打遮瑕和持妆控油。 特有的高显色微粒科技，上脸后是高级的雾面哑光感。刚上妆候其实有点假面感的...