基本信息
源码名称：js 图片切换代码(上一张、下一张) 历史图库
源码大小：0.28M
文件格式：.zip
开发语言：js
更新时间：2016-08-02
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
#box1{width:400px;height:200px; position:relative;margin:50px auto; overflow:hidden;}
#box1 ul{width:1600px;height:200px; position: absolute;top:0;left:0; -webkit-transition:1s all ease;}
#box1 ul li{width:400px;height:200px; background:yellow; font-size:100px; color:#fff; float:left;}
#box2{ text-align:center;}
#box2 span{padding:20px; background:red; cursor:pointer; color:#FFF;}
</style>
<script>
window.onload=function()
{
	var oBox1=document.getElementById('box1');
	var oUl=oBox1.children[0];
	var aLi=oUl.children;
	
	var aBtn=document.getElementsByTagName('span');
	
	//下一个
	var iNow=0;
	aBtn[1].onclick=function()
	{
		iNow  ;
		if(iNow==aLi.length)iNow=0;
		var l=-iNow*400;
		oUl.style.left=l 'px';
	};

	//上一个	
	aBtn[0].onclick=function()
	{
		iNow--;
		if(iNow==-1)iNow=aLi.length-1;   //负一 最后一个 length-1;
		var l=-iNow*400;
		oUl.style.left=l 'px';
	};
};
</script>

</head>

<body>


<div id="box1">
	<ul>
    	<li style="display:block"><img src="images/01.jpg"></li>
    	<li><img src="images/02.jpg"></li>
    	<li><img src="images/03.jpg"></li>
    	<li><img src="images/04.jpg"></li>
    </ul>
</div>
<div id="box2">
	<span>上一张</span>
	<span>下一张</span>
</div>
</body>
</html>