JS轮播图小练习

HTML代码

<div class="banner">	
    <ul class="imgList">
      <li><img src="img/a的副本.jpeg"/></li>
      <li><img src="img/d的副本.jpeg"/></li>
      <li><img src="img/q的副本2.jpeg"/></li>
      
    </ul>
    <div class="circle"></div>
    </div>

CSS代码

  <style>
			*{
				padding: 0px;
				margin: 0px;
			}
			.banner{
				 width: 600px;
				 margin: auto;
				 border: 10px solid green;
				 height: 350px;
				 position: relative;
				 overflow: hidden; 
			}
			.imgList img{
				width: 600px;
				 height: 350px;
			}
			.imgList{
				/* 绝对定位 */
				 position: absolute;
				/* left:-600px; */
				/* width: 2600px; */
			}
			.imgList li{
				float:left;
				margin-right: 20px;
				 list-style: none;
			}
			.circle{position: absolute;bottom: 15px;left:50%;transform: translateX(-50%);}
			.circle a{
				 width: 15px;
				 height: 15px;
				 background: green;
				 display: block;
				 border-radius: 50%;
				 opacity: .8;
				 float: left;
				 margin-right: 10px;
			}
			.circle a.hover{
				background: black;
				 opacity: .7;
			}
		</style>

<!-- 节流阀理解 -->

<!-- 点击圆圈 是不是有个动画

再点击圆圈 是不是有个动画

自动切换 是不是又是一个动画

那么这些动画再同时执行时 可能会出问题

怎么解决？ -> 一个动画执行完 再去执行另外一个动画

flag = true;

a动画

if(flag){这里面再执行动画

flag = false

move(a,b,function(){

flag = true 函数执行完后将flag改成true

})这是个动画

}

b动画

if(flag){是true时执行动画

flag = false

move(a,b,function(){

flag = true 函数执行完后将flag改成true

})

这是个动画

} -->

<!-- 实现 点击小圆点 图片滑动 小圆点样式改变 -->

JS代码

 <script>
      // 确定ul的宽度 动态的创建小圆点
			var imgList = document.querySelector('.imgList');
			var circle = document.querySelector('.circle');
			var circleA = circle.children;
			var imgListli = imgList.children;
			// console.log(imgListli);
			// thisIndex默认索引值是0
			var thisIndex = 0;
			// console.log(imgList.children.length);
			// window.onload延迟加载函数
			var flag = true;//再全局设置flag为true 让所有动画都可执行
			window.onload = function(){
				//给ui标签设置宽度
				 imgList.style.width =imgList.children.length*620+'px';
				 
				 //下面动态创建a标签
				 for (var i = 0; i < imgList.children.length; i++) {
				 	var aNode = document.createElement('a');
					
					//我们在这里创建index属性来记录索引值
					aNode.setAttribute('index',i);
					circle.appendChild(aNode);
				 }
				 
				 
				 // a动画
				 //给小圆点加点击事件
				circle.addEventListener('click',function(e){
					
					//这里给a标签点击事件有个小bug 就是我们鼠标点击到.circle标签时候图片也滑动了 
					//解决上面小bug的方法
					if(e.target.nodeName !='A'){
						return false;
					}
					
					if(flag){
						flag = false;
						// e.target指向的是a标签
						console.log(e.target);
						// console.log(e.target.nodeName);
						// 获得索引值
						 thisIndex = e.target.getAttribute('index');
						// console.log(thisIndex);
						//图片移动的规则 0索引值 ->0  1 ->-1*620  2 ->-2*620 
						
						// 这里的图片移动 我们可以用封装好的缓动动画来实现
						// imgList.style.left = -thisIndex*620+'px';
						slow(imgList,-thisIndex*620,function(){
							flag = true;
						});
						//调用小圆点改变样式的函数
						circlechange();
					}
				
				})
				
				// b动画
				//自动切换动画
				function autoChange(){
					// 设置定时器
					setInterval(function(){
						if(flag){
							flag = false;
							if(thisIndex>=imgListli.length){
								thisIndex = 0;
							}
							
							
							slow(imgList,-thisIndex*620,function(){
								flag = true;
							});
							circlechange();
							// console.log(thisIndex);
							//利用缓动函数 让图片动起来
							//注意 这里先图片移动 再thisIndex自增
							 thisIndex++;
						}
						
						
						
					},2000)
					
				}
				
				autoChange();
				
				function circlechange(){
					//先清除样式 再添加样式
					for (var i = 0; i <circleA.length; i++) {
						circleA[i].className = '';
					}
					circleA[thisIndex].className = 'hover';
				}
				
				//缓动动画
				function slow(obj,target,getflag){
					obj.myInter = setInterval(function(){
						var  offsetLeft = obj.offsetLeft;
						var num = (target-offsetLeft)/10;
						// Math.ceil向上取整 Math.floor向下取整
						num>0?num = Math.ceil(num):num=Math.floor(num);
						//注意 随着定时器的运行 num数值会由大到小发生变化
						// 因为offsetLeft的值在变大
						if(offsetLeft==target){
							clearInterval(obj.myInter);//清除定时器
							
							//再动画执行完了 执行将flag改为true的函数
							// 下面是固定写法
							getflag && getflag();
						}else{
							obj.style.left = offsetLeft+num+'px';
						}
					},10)
				}
					
				 
			}
			
  </script>

效果图