【前端笔记】js的轮播图前端实现

 定时移动 鼠标控制 item关联控制(播放关联 点击关联) 左右移动

 实现滚动

【前端笔记】js的轮播图前端实现_第1张图片

 

 

【前端笔记】js的轮播图前端实现_第2张图片【前端笔记】js的轮播图前端实现_第3张图片

或者

【前端笔记】js的轮播图前端实现_第4张图片

因为最后一张后面有空白,所以把第一张克隆到最后一张后面

【前端笔记】js的轮播图前端实现_第5张图片

【前端笔记】js的轮播图前端实现_第6张图片

鼠标控制移动暂停

【前端笔记】js的轮播图前端实现_第7张图片

【前端笔记】js的轮播图前端实现_第8张图片

【前端笔记】js的轮播图前端实现_第9张图片

 

鼠标点击控制当前第几张

   中间变量是page 所以可以通过更改page值 来实现(左右控制移动也可以用更改page值++或--实现)

【前端笔记】js的轮播图前端实现_第10张图片

封装一个选择器函数

【前端笔记】js的轮播图前端实现_第11张图片

具体实现代码如下:





无标题文档






    
       
               
  •            
  •            
  •            
  •            
  •        
   

 

你可能感兴趣的:(前端)