轮播图

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

逻辑思维:每次点击按钮时,只需要改变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类似,都是一个具有相同类名的元素的数组。使用这个方法还可以查找带有多个类名的元素,只要在字符串参数中用空格分隔类名即可.



阅读更多
上一篇简单的商品加减和统计
下一篇双等判断及数据类型的转换
想对作者说点什么? 我来说一句

轮播图全屏

2018年01月17日 360KB 下载

android轮播

2017年11月17日 37.03MB 下载

纯js轮播图

2017年11月08日 52B 下载

JS原声轮播图

2017年12月12日 803KB 下载

轮播弹性效果无限循环轮播图

2018年04月24日 472KB 下载

图片切换,轮播图

2015年03月17日 466KB 下载

轮播图css作品

2018年03月09日 270KB 下载

各式轮播图

2018年03月10日 6.1MB 下载

手机轮播图3D插件

2018年02月07日 2.68MB 下载

没有更多推荐了,返回首页

关闭
关闭