	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script >
	var curIndex=0;
	//时间间隔(单位毫秒)，每5秒钟显示一张，数组共有4张图片放在Photos文件夹下。
	var timeInterval=5000;
	var arr=new Array();
	arr[0]="../img/ff.jpg";
	arr[1]="../img/bb.jpg";
	arr[2]="../img/aa.jpg";
	arr[3]="../img/dd.jpg";
	//arr[4]="../img/ee.jpg";

	setInterval(changeImg,timeInterval);
	function changeImg()
	{

	var obj=document.getElementById("obj");
	if (curIndex==arr.length-1)
	{
	curIndex=0;
	}else
	{
	curIndex+=1;
	}
	obj.src=arr[curIndex];

	}
	$(function(){
	$("#shang").click(function(){
	if(curIndex == 0){
	curIndex = arr.length-1;
	}else{
	curIndex--;
	}
	$("img").attr("src",arr[curIndex]);
	});
	$("#xia").click(function(){
	if(curIndex == arr.length-1){
	curIndex = 0;
	}else{
	curIndex++;
	}
	$("img").attr("src",arr[curIndex]);
	});
	});

	</script>

	</head>
	<body>
	<center>
	<!---->

	<img id=obj src="../img/ee.jpg" width=600 height=550 border =0><br />
	<input type="button" value="上一张" id="shang" onclick="shangs();"/>
	<input type="button" value="下一张" id="xia" />
	</center>
	</body>
	</html>

更多推荐

jquery的图片轮播和上一页+下一页