轮播图

落日映苍穹つ 2022-05-27 08:16 320阅读 0赞

**点击左右按钮，切换图片。图片的序号也随之变化。**

逻辑思维：每次点击按钮时，只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中，就可以知道每一张图的位置信息，在通过在数组中的位置的改变，从而改变img的“src”

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>轮播图</title>
    	<style type="text/css">
    	body{margin: 0;padding: 0;}
    	#div1{position: relative;width: 390px;}
    	#img1{width: 390px;}
    	#btn1{background: url(img/pic-2.png) no-repeat;width: 55px;height: 55px;position: absolute;left: 5px;top:240px;border: none;}//通过定位的方法可以将按钮定位到自己想要的位置。
    	#btn2{background: url(img/pic-3.png) no-repeat;width: 55px;height: 55px;position: absolute;left: 320px;top:240px;border: none;}
    	#p1{top:0;width: 100%;position: absolute;left: 0;margin: 0;height: 50px;line-height: 50px;text-align: center;font-size: 32px;color: #fff;background-color: rgba(0,0,0,0.6);}
    	</style>
    </head>
    <body>
    	<div id="div1">
    		<img src="img/1.png" alt="" id="img1">
    		<input type="button" id="btn1">
    		<input type="button" id="btn2">
    		<p id="p1">1/4</p>
    	</div>
    	<script>
    		var aBtn=document.getElementsByTagName('input'); //
    		var oImg=document.getElementById('img1');
    		var arr=["img/1.png","img/2.png","img/3.png","img/4.png"]
    		var oP=document.getElementById("p1")
    		for(var i=0;i<arr.length;i++){
    			//图片向后切换
                            aBtn[1].onclick=function(){  
    			if(i==3||i>3){  //如果图片位于最后一张，则把下一次点击回到第一张图上
    				i=0;
    			}else{
    				i++;
    			}
    			oImg.src=arr[i];
    			oP.innerHTML=i+1+"/"+arr.length
    			}	
                            //图片向前切换
    			aBtn[0].onclick=function(){
    			if(i==0){  //如果图片位于第一张，则下一次点击到最后一张。
    				i=3;
    			}else{
    				i--;
    			}
    			oImg.src=arr[i];
    			oP.innerHTML=i+1+"/"+arr.length
    			}
    		}
    	</script>
    </body>
    </html>
    
    
    	<title>轮播图</title>
    	<style type="text/css">
    	body{margin: 0;padding: 0;}
    	#div1{position: relative;width: 390px;}
    	#img1{width: 390px;}
    	#btn1{background: url(img/pic-2.png) no-repeat;width: 55px;height: 55px;position: absolute;left: 5px;top:240px;border: none;}//通过定位的方法可以将按钮定位到自己想要的位置。
    	#btn2{background: url(img/pic-3.png) no-repeat;width: 55px;height: 55px;position: absolute;left: 320px;top:240px;border: none;}
    	#p1{top:0;width: 100%;position: absolute;left: 0;margin: 0;height: 50px;line-height: 50px;text-align: center;font-size: 32px;color: #fff;background-color: rgba(0,0,0,0.6);}
    	</style>
    </head>
    <body>
    	<div id="div1">
    		<img src="img/1.png" alt="" id="img1">
    		<input type="button" id="btn1">
    		<input type="button" id="btn2">
    		<p id="p1">1/4</p>
    	</div>
    	<script>
    		var aBtn=document.getElementsByTagName('input'); //
    		var oImg=document.getElementById('img1');
    		var arr=["img/1.png","img/2.png","img/3.png","img/4.png"]
    		var oP=document.getElementById("p1")
    		for(var i=0;i<arr.length;i++){
    			//图片向后切换
                            aBtn[1].οnclick=function(){  
    			if(i==3||i>3){  //如果图片位于最后一张，则把下一次点击回到第一张图上
    				i=0;
    			}else{
    				i++;
    			}
    			oImg.src=arr[i];
    			oP.innerHTML=i+1+"/"+arr.length
    			}	
                            //图片向前切换
    			aBtn[0].οnclick=function(){
    			if(i==0){  //如果图片位于第一张，则下一次点击到最后一张。
    				i=3;
    			}else{
    				i--;
    			}
    			oImg.src=arr[i];
    			oP.innerHTML=i+1+"/"+arr.length
    			}
    		}
    	</script>
    </body>
    </html>

![2018041423012096][]

顺便说一下，document.ElementById  ,document.ElementsByTagName,document.ElementsByClassName三者的区别

1.document.ElementById：通过元素的ID获取元素节点，这个方法将返回一个与给定id属性值的元素节点对应的对象。该方法只有一个参数：你想获得的那个元素的id属性的值。var一个变量时以小"o"开头，本例中如"oImg","o"后面第一个字母大写。

2.document.ElementsByTagName：该方法返回一个数组，所以var一个变量时以小“a”开头，在本例中如"aBtn"。该方法也只有一个参数的函数，他的参数是标签的名字。本例中“input”就是一个参数。可以通过循环语句for或者while来遍历这个数组。获取到其中每一个参数。

3.document.ElementsByClassName：该方法也只接受一个参数，就是类名（class），返回值也与document.ElementsByTagName类似，都是一个具有相同类名的元素的数组。使用这个方法还可以查找带有多个类名的元素，只要在字符串参数中用空格分隔类名即可.

[2018041423012096]: /images/20220527/8a1fa8edbc7446eb9e3ec6a3b5d44073.png