JS中的一个轮播图小demo

一、手动轮播

1.首先你得准备几张规格，大小相同的图片(大于二张哦)，命名有规律一点就ok了，下面我的图片位置及命名：

2.下面直接上小demo的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换图片</title>
		<style>
			div{
				border: 1px solid white;
				width: 500px;
				height: 350px;
				margin: auto;      /*页面居中对齐*/
				text-align: center;  /*文字居中*/
			}
		</style>
		<script>
			var i=1; //从第一张开始
			function changeImg(){
			     i++;    //var i++;这样不对，不能重新定义，只需++就好
				document.getElementById("img1").src="../../img/"+i+".jpg";  //首先每个轮播图的命名都是有规律的，这样方便循环使用
				if(i==3){  //图片循环完了进行初始化
					i=0;
				}
			}
		</script>
	</head>
	<body>
		<div>
			<!--我的这个demo是手动的，自动可以加自动函数-->
			<input type="button" value="下一张"  onclick="changeImg()"/> 
			<!--图片路径根据自己实际情况来，在这显示的写第一张就行，其他的手动时递增就ok,所以说这个图片命名要有规律些，这样好处理-->
			<img src="../../img/1.jpg" width="100%" height="100%" id="img1" />
		</div>
	</body>
</html>

3.效果图：

总结：手动点击时才能改换图片；重要的还是当图片循环完需要初始化，及又要从第一张开始；如果要使自动轮播，需要调用函数setInterval("显示图片的函数",设置的间隔时间);当然这个是在当你加载这个页面的时候才触发的，虽然简单，哈哈，不足之处，请多指教！

二、自动轮播

前提是我调用了JS中的setInterval("显示图片的函数",设置的间隔时间)方法，用来做定时器，其实还可以用setTimeout()方法，这里不做细解释。下面来，不懂的可以查看JS的API

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//初始化方法
			function init(){
				/*setInterval功能用于循环，常常用于播放动画，或者时间显示。
                                 是在指定的周期内。按照参数的函数名去运行一个函数，它有两种语法。
                                  一种是基本用法，默认的语法。还有一种是专家模式的语法。*/
				window.setInterval("changeImg()",3000); //或者setInterval("changeImg()",3000);都可以
			}
			//书写函数
		    var i=0;
			function changeImg(){
				i++;
				//获取图片位置，并设置src属性值
				document.getElementById("img1").src="../img/"+i+".jpg";
				if(i==3){
					i=0;
				}
			}
		</script>
	</head>
	<body onload="init()">
		   <!--轮播图部分-->
			<div id="">
				<img src="../img/1.jpg" width="100%" id="img1"/>
			</div>
	</body>
</html>

效果图：

注：我是在前面手动的基础上加了定时器，这里只附上一张图，其他的你自己可以下个小demo测试一下。

JS中的一个轮播图小demo

一、手动轮播

二、自动轮播

猜你喜欢