3.16 study 网页轮播图1 js实现

首先汇报进度134/167 今天学了大概两小时，今天进度偏慢但我绝对很有必要，没首先按照视频实现用了自己的方法，然后出错调试，算是复习前面了基础没打好，现在还没做完目前效果如下图

已经有大部分基础 按键显示，按键切换图片 点击小圆圈切换图片， 缺少的是 按键切换图片小圆圈跟随移动，图片自动播放， 鼠标经过图片停止移动功能，来一一介绍今天功能和我犯的错

第一个功能经过显示左右按键：

			focus.addEventListener('mouseenter',function(){
				left.style.display='block'
				right.style.display='block'
			})
			focus.addEventListener('mouseleave',function(){
				left.style.display='none'
				right.style.display='none'
			})

这个功能是最简单的功能没啥好说的

第二个功能 就是点击小圆圈切换图片

var f_ul= focus.querySelector('ul')
			var lenth =f_ul.children.length
			var ol = focus.querySelector('.circle')
			var img = focus.querySelector('ul').querySelectorAll('img')
			console.log(img[0].width)
			for(var i=0;i<lenth;i++){
				//创建圈圈
				var li = document.createElement('li')
				console.log('第一个i',i)
				li.setAttribute('index',i)
				ol.appendChild(li)
				// 生成自定义索引号
				
				li.addEventListener('click',function(){
					
					for(var i =0;i<lenth;i++)
					{
						ol.children[i].className=''
						console.log('第二个i',i)
					}
					this.className='current'
//					console.log(-i*img[i].width)
					var focuswidth =focus.offsetWidth// 移动宽度
					var index = this.getAttribute('index')
//					i=i-1// 原因异步处理
//					fn(f_ul,-img[i].offsetWidth)// 为什么是错误写法呢  异步机制问题  犯蠢了  应该采用标签 
//					fn(f_ul