简单的轮播图

简单的轮播实现

1.在google上找一些图片
2.用class = window的div包起来, window就是用户的可视区域, 设置overflow: hidden遮住其他图片

3. 用css flex横屏

    .images{
      display:flex;
      align-items: flex-start;
    }

5. 设置按钮

6. 使用jQuery
   不管多少内容都可以滚动:

var allButtons = $('#buttons > span')

for(let i = 0; i

问题: 第二张图会闪动?
原因是因为放大了页面
可以使用margin-left解决

重排 页面性能优化:
如果知道图片宽高,最好写在上面,浏览器少一次让位的过程

防止页面后面的元素往后退

image.png

简单的轮播图

无限轮播的实现

1. 首先无限轮播的元素都是水平排列，窗口是用户可见的部分
   超出窗口的都隐藏.
2. 对于不是首位元素，改变定位后的元素left值或者改变translateX
3. 如下图, 如果我们点击上一张,从第一张到第四张图, 我们需要复制最后一张图到第一张前面来实现无缝切换.
4. 复制的第四张图在切换之后通过jQuery再移动到第四张图
5. 把元素回归到正确的位置，方便用户继续点击

image

Slides-Demo

---

结尾

如今, 大多数的程序都不会自己写轮播图, 因为太麻烦了, 建议大家还是使用Swipe Demo上的轮播图
Swipe各种风格的轮播图