JavaScript||最简单的轮播图实现

今天给大家分享的是一个具简单的轮播图，只实现了最基本的轮播功能，感兴趣的仁可以康康~

页面布局

由于当时只计划实现简单的自动轮播功能，此次的代码量巨少。页面布局我主要选择了“img”和“input”标签，它们分别存放图片和图片下的小圆点，而为了后面布局方便，我选用了两个”div"标签作为容器，下面直接放代码。

<div id="divAll">
	<img id="img" src="img/1.png" name="photo1" />
	<div id="ddd">
		<input id="radio1" type="radio" name="small" checked="checked"/>
	    <input id="radio2" type="radio" name="small"/>
	    <input id="radio3" type="radio" name="small"/>
	    <input id="radio4" type="radio" name="small"/>
	</div>
</div>

页面布局完成又页面是这样的：

CSS样式设计

哈哈，布局完成后的页面实在太…所以对其进行样式设计势在必行，我主要是将图片固定大小后居中，在给它加一个小边框。而小圆点基本上没怎么修改，仅仅利用绝对定位让其呆在该在的位置。话不多说，下面放代码和添加样式后图片：

body{
	text-align: center;
	width: auto;
	height: auto;
}
img{
	text-align: center;
	width: 600px;
	height: 400px;
	border: 4px solid black;
	border-radius: 16px;
}
#ddd{
	width: 10%;
	position: absolute;
	left: 45%;
	margin-top: -32px;
	
}
input{
	background-color: wheat;
	color: gold;
}

js功能实现

万事俱备，只欠实现啦，这次的js代码也很简单，主要是用到了一个函数：setInterval（需要重复执行的函数名， 重复的时间间隔）
下面是js代码：

window.onload = function(){
	var x = 1;
	var idimg = document.getElementById("img");
	var ids = document.getElementsByName("small");
	//alert(ids.length)//4
	
	//自动轮播实现
	var changeImg = function(){
		x++;
		if(x > 4){
			x = 1;
		}
		idimg.src = "img/" + x + ".png";
		ids[x - 1].checked="checked" ;
		
	}
	v = window.setInterval(changeImg, 1000);
	
	//刷新后显示图片一
	window.onunload = function(){
		x = 1;
		ids[0].checked="checked" ;
	}

}

最后放上测试的效果图：

#JAVASCRIPT#轮播图