轮播图的思路

div轮播图

思路:

  1. 根据图片数量生成小圆点
    • 需要给小圆点添加自定义属性,表示索引
  2. 默认第一张图在中间,其他图在右边

    • 中间:left:0

    • 右边:left:图片的宽度

    • 左边:left:-图片的宽度

  3. 默认点亮第一个小圆点
  4. 点击next按钮,看下一张
  5. 点击prev按钮,看上一张
  6. 点击小圆点,切换到对应的图片

    • 如果newIndex<index
      • newIndex必须在左边,left:-width
      • newIndex进来{left:0},index取右边{left:+width}
    • 如果newIndex>index
      • newIndex必须在右边,left:+width
      • newIndex进来{left:0},index取左边{left:-width}
  7. 轮播图可以自动轮播
    • 就是设置定时器,每个一段时间调用看下一张的方法
  8. 鼠标移入停止轮播
  9. 鼠标移出继续轮播
暂无评论

发送评论 编辑评论


				
上一篇
下一篇