javascript实现 页面图片切换功能

<div>
    <button id="l">左</button>
    <img id="img" width="300" src="../static/images/xxx01.jpg" alt="">
    <button id="r">右</button>
</div>

<script>
//将图片url存在数组中
var imgs=[
	{'url':'../static/images/xxx01.jpg},
	{'url':'../static/images/xxx02.jpg},
	{'url':'../static/images/xxx03.jpg}
	]

//定义当前显示图片的索引号，用于之后索引查找其他图片
var i=0;

//当点击 #l 时，将当前显示的图片隐藏掉(淡隐),并显示出接下来的那张图片
$("#l").on("click",function(){
	$("#img").fadeOut(1000,function(){
		i--;	//自减，当i<0时又回到最后一个图片的索引处
		if(i<0){
			i=imgs.length-1};
		//设置显示的图片url为新的url
		$("#img").attr("src",imgs[i].url);
		//显示图片
		$("#img").fadeIn(1000)
			     		});
			   })

//当点击#r时，将当前显示的图片隐藏掉(淡隐),并显示出接下来的那张图片
$("#r").on("click",function(){
	$("#img").fadeOut(1000,function(){
		i++;
		if(i>imgs.length-1){
			i=0};
		//设置显示的图片url为新的url
		$("#img").attr("src",imgs[i].url);
		//显示图片
		$("#img").fadeIn(1000)
					});
			  })
</script>