轮播图

最新推荐文章于 2022-04-14 09:31:45 发布

小白银

最新推荐文章于 2022-04-14 09:31:45 发布

阅读量190

点赞数 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>

顺便说一下，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类似，都是一个具有相同类名的元素的数组。使用这个方法还可以查找带有多个类名的元素，只要在字符串参数中用空格分隔类名即可.

小白银

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
轮播图

点击左右按钮，切换图片。图片的序号也随之变化。逻辑思维：每次点击按钮时，只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中，就可以知道每一张图的位置信息，在通过在数组中的位置的改变，从而改变img的“src”<!doctype html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫

专栏目录