轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

小白银

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量195

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/mozhu1997/article/details/79944982

版权

js 专栏收录该内容

6 篇文章 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>