无限滚动轮播(Js 操作Dom)

  1. 该插件由轮播图片、向前向后按钮及底部分页器3部分组成
  2. 主要逻辑是以操作dom完成的,所有图片设置浮动,显示在同一行,即:
    next按钮:先显示,再移动;点击该按钮,图片列表向左移动,列表的left值变小,当移动到被显示图片位置后,将被显示图片之前的图片append至列表末尾,通过append操作的元素是被移动而不是被复制
    pre按钮:先移动,再显示;点击该按钮,先将末尾图片prepend至列表首位,这里和append一样,是移动不是复制,这时列表再向右移动,left值变大,移动至列表首位显示图片
  3. 先看dom结构

  1. 样式中,需要注意的就是所有图片是浮动显示在一行的

  1. 最后看逻辑部分,需要解释理解的都写在注释里了

你可能感兴趣的:(无限滚动轮播(Js 操作Dom))