JS练手小项目1-轮播图

JS练手小项目 - 轮播图

html

<img src="" width="500" height="300">
<p>
	<a href="#" onclick="choose(this);return false;"><</a>
	<a href="../img/1.jpg" onclick="showpic(this);return false;">1</a>
	<a href="../img/2.jpg" onclick="showpic(this);return false;">2</a>
	<a href="../img/3.jpg" onclick="showpic(this);return false;">3</a>
	<a href="../img/4.jpg" onclick="showpic(this);return false;">4</a>
	<a href="../img/5.jpg" onclick="showpic(this);return false;">5</a>
	<a href="#" onclick="choose(this);return false;">></a>
</p>
<script src="./js/轮播图.js"></script>

js

var imgNode = document.getElementsByTagName("img")[0];
var lastNode = document.getElementsByTagName("a").firstChild;
var nextNode = document.getElementsByTagName("a").lastChild;

//点击按钮切换图片
function showpic(apic){
	var source = apic.getAttribute("href");
	imgNode.setAttribute("src",source);
}

//自动切换图片
var i = 1;
function change(){
	imgNode.setAttribute("src","../img/"+i+".jpg");
	i++;
	if(6==i){
		i=1;
	}
}

//左右切换按钮
function choose(button){
	var i = Number(imgNode.getAttribute("src").replace(/[^0-9]/ig,""));
	if("<"==button.firstChild.nodeValue){
		if(1==i){
			imgNode.setAttribute("src","../img/5.jpg");
		}else{
			imgNode.setAttribute("src","../img/"+(i-1)+".jpg");
		}
	}else if(">"==button.firstChild.nodeValue){
		if (5==i) {
			imgNode.setAttribute("src","../img/1.jpg");
		}else{
			imgNode.setAttribute("src","../img/"+(i+1)+".jpg");
		}
	}
}

window.onload = change;
setInterval(change,3000);