jq 点击按钮换图运动 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{margin:0; padding:0;}
	.outer{width:800px; height:400px; overflow:hidden; margin:0 auto;}
	.inner{width:3200px; height:400px; position:relative;}
	.inner ul{ position:absolute; left:0; top: 0;}
	.inner ul li{ float:left;}
	.inner ul li img{ width:800px; height:400px;}
	.prePage{ width:50px; height:100px; line-height:100px; display:block; margin-top:-50px; font-size:40px; text-align:center; background:rgba(200,200,200,0.5); position:absolute; left: 0;top: 50%;}
	.nextPage{width:50px; height:100px; line-height:100px; display:block; margin-top:-50px; font-size:40px; text-align:center; background:rgba(200,200,200,0.5); position:absolute; left:750px;top: 50%;}
	</style>

	<script src="jquery-2.2.2.min.js"></script>
	<script>
	$(function(){
		var page = 1;
		$(".prePage").click(function(){
			page--;
			if(page < 1)
			{
				page = 4;
			}
			changePage(page);
		})

		$(".nextPage").click(function(){
			clearInterval(time);
			page++;
			if(page>5)
			{
				page = 1;
			}
			changePage(page);
		
		})

		var time = null;
		
		function changePage(page){
			
				var num1 =page * (-800);

				if(num1 <= -4000)
				{
					num1 = -800;
				}
				
				$(".inner > ul").animate({"left":num1},500)

		}
		
		
	
	})
		
	</script>
</head>
<body>
	<div class="outer">
		<div class="inner">
			<ul style = "left:-800px">
				<li><img src="img/292326.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292323.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292325.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292326.jpg" height="768" width="1366" alt=""></li>
				<li><img src="img/292321.jpg" height="768" width="1366" alt=""></li>

			</ul>
			
				<span class="prePage"><</span>
				<span class="nextPage">></span>
		</div>
	</div>
	
</body>
</html>

　　

posted @ 2016-03-19 01:40  mingjixiaohui  阅读(264)  评论(0)    收藏  举报