2016-04-22 JQuery-滑动图片
简介：由JQuery实现利用按钮来使图片滑动。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>JQuery-滑动图片</title>
<link type="text/css" rel="stylesheet" href=""/>
<style type="text/css">
body{margin:0 auto;}
#div_J2{width:800px;height:230px;border:1px solid red;}
#img2_J2,#img3_J2{width:800px;height:230px;position:absolute;left:-800px;}
#img1_J2{width:800px;height:230px;position:absolute;left:1px;}
#div1_J2{bottom:0px;position:relative;top:200px;left:700px;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var i=$(this).text();
//alert(i);
if(i==1){
$("#img2_J2").css({'left':'-800px'});
$("#img3_J2").css({'left':'-800px'});
//JQuery实现动画（关键点）
$("#img1_J2").animate({'left':'1px'});
}else if(i==2){
$("#img1_J2").css({'left':'-800px'});
$("#img3_J2").css({'left':'-800px'});
$("#img2_J2").animate({'left':'1px'});
}else if(i==3){
$("#img1_J2").css({'left':'-800px'});
$("#img2_J2").css({'left':'-800px'});
$("#img3_J2").animate({'left':'1px'});
}
});
});
</script>
</head>
<body>
<div id="div_J2">
<img id="img1_J2" src="1.jpg"/>
<img id="img2_J2" src="2.jpg"/>
<img id="img3_J2" src="3.jpg"/>
<div id="div1_J2"><button>1</button><button>2</button><button>3</button></div>
</div>
</body>
</html>
运行结果：
