javascript 轮播图（缓存效果）详细篇

Dear 丶 2021-11-11 11:56 321阅读 0赞

对现在的我来说，这样的操作还是有点麻烦，综合使用的话还是有很多毛病，话不多说，做一个上下平移的轮播图（纯js），因为不会，所以可能比较冗余，以便复习到更多知识点

#### 过程 ####

1、生出数字按钮，就是呢个代表着图片的小圆点，就暂且当图片不知道几张  
            1.1通过获取图片数量用for（）循环，最后的结果是ul>li>1\\2\\3\\4的效果

2、按钮移动切换  
            3.1：当鼠标移动到图片对应的数字按钮时  
            3.2：初始化状态

3、初始化状态，包括两个部分  
            2.1：当前图片对应的数字显示不一样的样式  
            2.2：图片特效函数，参数是根据下标即数字按钮获得不同的长度，用作上或下移动的距离，可以通过 “-” 改变上或下的方向（最好在全部步骤完成后书写）

4、通过 playTimer = setInterval(next, 3000);每三秒更换数字,并修改样式  
            4.1:通过下标设置自动改变方向  
            4.2:初始化状态

5、鼠标移入展示区停止自动播放（clearInterval(playTimer)）

6、鼠标离开展示区开始自动播放（playTimer = setInterval(next, 3000) ）

#### 实例：轮播图之缓存效果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>自动播放——幻灯片缓冲效果</title>
    		<style type="text/css">
    			body,
    			li,
    			ul,
    			div { 
    				padding: 0;
    				margin: 0;
    			}
    
    			body { 
    				background: #000000;
    				text-align: center;
    				font: 12px/20px Arial;
    			}
    
    			#box { 
    				position: relative;
    				width: 492px;
    				height: 172px;
    				background: #fff;
    				border-radius: 5px;
    				border: 8px solid #fff;
    				margin: 10px auto;
    				cursor: pointer;
    			}
    
    			#box .list { 
    				position: relative;
    				width: 490px;
    				height: 170px;
    				overflow: hidden;					/* 删除显示区域 */
    			
    			}
    
    			#box .list ul { 
    				position: absolute;
    				top: 0;
    				left: 0;
    			}
    
    			#box .list li { 
    				/* li上下之间有间隙，设置高度之后可以清楚 */
    				width: 490px;
    				height: 170px;
    				overflow: hidden;
    			}
    
    			#box .list li { 
    				width: 490px;
    				height: 170px;
    				overflow: hidden;
    			}
    
    			#box .count { 
    				position: absolute;
    				right: 0;
    				bottom: 5px;
    			}
    
    			#box .count li { 
    				color: #fff;
    				float: left;
    				width: 20px;
    				height: 20px;
    				cursor: pointer;
    				margin-right: 5px;
    				overflow: hidden;
    				background: #F90;
    				opacity: 0.7;
    				filter: alpha(opacity=70);
    				border-radius: 20px;
    			}
    
    			#box .count li.current { 
    				color: #fff;
    				opacity: 1;
    				filter: alpha(opacity=100);
    				font-weight: 700;
    				background: #f60;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() { 
    				var oBox = document.getElementById("box");
    				var oList = oBox.getElementsByTagName("ul")[0];
    				var aImg = oBox.getElementsByTagName("img");
    				var timer = playTimer = null;
    				var index = i = 0;
    				var bOrder = true; /* order命令；顺序；规则 */
    				var aTmp = []; /* temporary暂时的 */
    				var aBtn = null;
    				//生成数字按钮
    				for (var i = 0; i < aImg.length; i++) { 
    					aTmp.push("<li>" + i + "</li>")
    					// console.log(aTmp); /* 获取li>1\2\3\4\5 */
    				}
    				//创建数字按钮格式
    				var oUl = document.createElement("ul");
    				oUl.className = "count"
    				oUl.innerHTML = aTmp.join(""); /* 将数组直接输入 */
    				oBox.appendChild(oUl);
    				//获取创建节点的li
    				oBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");
    
    				for (var i = 0; i < oBtn.length; i++) { 
    					oBtn[i].index = i;
    					oBtn[i].onmouseover = function() { 
    						//初始化
    						index = this.index
    						initial()
    					}
    				}
    
    				//初始化
    				function initial() { 
    					for (var i = 0; i < oBtn.length; i++) { 
    						oBtn[i].className = "";
    						oBtn[index].className = "current";
    						/* 注意是index，上面已经定义了index=0； 所以其实就是改变第一个的样式，而调用后index改变*/
    
    						//图片特效
    						startMove(-(index * aImg[0].offsetHeight))
    
    					}
    				}
    
    				//缓存效果,即图片移动逐渐变得缓慢
    				function startMove(imgTop) { 
    					// 不加的图片不停闪烁,加载timer后的话,没有特效
    					clearInterval(timer);		/* timer定时器 */
    					timer = setInterval(function() { 
    						var speed= (imgTop - oList.offsetTop) / 10;
    						/* 使speed变小，不然假如speed=1000px，直接就换页了，就没缓冲效果 即被除数（10）越大，缓冲效果越明显 */
    						if(speed>0){ 
    							speed=Math.ceil(speed);
    						}else{ 
    							speed=Math.floor(speed);
    						}
    						console.log(speed)
    						/* 缓冲的效果就是在这里实现的，我们将速度的大小与当前位置与终点之间的距离成正比，那么距离越小，速度也越小， 此外一定要注意这里我们要对速度进行向上，或者向下取整，而且对于正数我们要向上取整，对于负速度，我们要向下取整。 */
    						if(oList.offsetTop == imgTop){ 
    							clearInterval(timer)
    						}else{ 
    							oList.style.top = oList.offsetTop + speed + "px";
    							/* 由上可知，无论是上下，当距离越近时，speed的值越小，即上或下的速度越来越慢 */
    						}					
    					}, 30)
    				}
    				initial()
    				//第一个时,最后一个时，判定,效果就是从1-5,然后从5-1
    				function next() { 
    					bOrder ? index++ : index--;
    					if (index <= 0) { 
    						index = 0;
    						bOrder = true;
    					}
    					if (index >= oBtn.length - 1) { 
    						index = oBtn.length - 1;
    						bOrder = false
    					}
    					initial()
    				}
    				
    				//每三秒更换数字,并修改样式
    				playTimer = setInterval(next, 3000);
    
    				//鼠标移入展示区停止自动播放
    				oBox.onmouseover = function() { 
    					clearInterval(playTimer)
    				};
    				//鼠标离开展示区开始自动播放
    				oBox.onmouseout = function() { 
    					playTimer = setInterval(next, 3000)
    				};
    			}
    		</script>
    	</head>
    	<body>
    		<div id="box">
    			
    			<div class="list">
    				
    				<ul>
    					<li><img src="img/01.jpg" width="490" height="170" /></li>
    					<li><img src="img/02.jpg" width="490" height="170" /></li>
    					<li><img src="img/03.jpg" width="490" height="170" /></li>
    					<li><img src="img/04.jpg" width="490" height="170" /></li>
    					<li><img src="img/05.jpg" width="490" height="170" /></li>
    				</ul>
    
    				
    				
    			</div>
    
    
    
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20211109/e456d137f4a2412f97dccfeea1267d48.png