无缝轮播的实现与封装

轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见,  所以有必要理解其中的原理

轮播图HTML中应包含几个部分?

1. 视觉窗口,即可见区域
2. 包含所有图片的容器
3. 具体的每一张轮播图片
4. 锚点列表, 点击可跳到具体某一页
5. 左右切换按钮

让每一个轮播页大小刚好等于视图窗口大小

1. 设置视图窗口宽度,  让超过的部分隐藏
2. 设置包含所有图片的容器的宽度为 10000%, 目的是为了让容器足够大.  因为如果容器不够大的话容器中每一张图片就算设定了固定宽度也还是会受到挤压导致一定程度的变形.
   这里设置的宽度10000%为相对与父div(视图窗口)的100倍, 即100% * 100;  所以这个轮播图最多可装下100个轮播页面
3. 设置每一个轮播页面的宽度为父div (容器) 1%, 刚好等于爷爷div (视图窗口) 的大小, 即 100% =  100% * 100 * 1% .  这时视图窗口div中就刚好可见一个轮播页.

每一次滚动图片JS需要做什么?

1. 改变索引, 添加class使对应锚点设为选中状态
2. 计算这次滚动到终点时包含所有图片的容器需要相对与视图窗口左移的位置
3. 清空定时器(防止开启多个重名定时器导致图片滚动速度收到影响)
4. 开启定时器(刷新速度一般为10~20ms), 每一次将图片移动一定的距离,  直达到达这次移动重点时清空定时器

如何让轮播图自动滚动?

设置一个定时器(刷新速度没几秒一次), 每次调用一次轮播的移动函数

如何实现无缝轮播(最后一张转到第一张时的衔接)

1. 在最后一张轮播图后复制一份第一张轮播图, 放到最后, 让第一页和最后一页完全相同
2. 最后一张轮播图移动到终点时将包含所有图片的容器的左偏移量设为0, 即最后一张滚动到终点时瞬间将第一张轮播图放置于视图窗口中, 看起来就无缝了

让滚动速度为匀减速运动

因为匀速运动的轮播不是很好看, 所以可以通过JS控制移动速度

在定时器中每一次移动距离可以设置为  移动距离 = (终点 - 当前位置) / 15   

这个15是随便写的, 终点 -当前位置在除以一个大于一的数, 这个数每次计算时都会变小, 所以成功做到了变速运动.

HTML

<!--视图窗口 -->
<div id="container">
    <!-- 包含所有图片的容器 -->
    <div id="inner" class="clear">
        <img style="background:red;" src="#1#" alt="">
        <img style="background:orange;" src="#2#" alt="">