轮播图

原创 2018年04月14日 23:02:50

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

逻辑思维:每次点击按钮时,只需要改变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>


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



收藏助手
不良信息举报
您举报文章:轮播图
举报原因:
原因补充:

(最多只允许输入30个字)