jquery常见特效之轮播图

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">	
	*{margin: 0; padding: 0;}
	ul,ol{list-style: none;}
	#box{
		width: 500px;
		height: 300px;
		margin: 50px auto;
		overflow: hidden;
		position: relative;
	}
	.pictures{
		float: left;
		z-index: 1000;
		width: 5000px;
		height: 300px;
	}
	.pictures li{float: left;}
	.left,.right{
		width: 18px;
		height: 40px;	
		background: #ccc;
		opacity: 0.6;
		font-size: 30px;		
		font-weight: bold;
		cursor: pointer;
	}
	.left{
		position: absolute;		
		top: 45%;  
	}
	.right{
		position: absolute;		
		top: 45%;  
		right: 0;
	}
	</style>
<body>
	<div id="box">
		<ul class="pictures">
			<li><img src="images/1.jpg"></li>
			<li><img src="images/2.jpg"></li>
			<li><img src="images/3.jpg"></li>
			<li><img src="images/4.jpg"></li>			
			<li><img src="images/5.jpg"></li>
		</ul>
		<div class="left"><</div>
		<div class="right">></div>
	</div>
	<script type="text/javascript">	
		var rightRunning = false;	
		//轮播图左切换
		$(".right").click(function(){
			if(rightRunning)
				return;
			rightRunning = true;
			$(".pictures").stop(true).animate({
				"margin-left":-500
			},500,function(){
				$(".pictures li:first").appendTo($(".pictures"));	
				$(".pictures").css('margin-left', '0px');
				rightRunning = false;
			})
			
		})
		//轮播图右切换
		var leftRunning = false;
		$(".left").click(function(){
			if(leftRunning) 
				return;					//阻止连续点击左切换
			leftRunning = true;
			$(".pictures").stop(true);
			$(".pictures li:last").prependTo($(".pictures"));	
			$(".pictures").css('margin-left', '-500px');
			$(".pictures").animate({
				"margin-left":0
			},500,function(){leftRunning = false;})			
		})
	</script>
</body>
</html>

演示效果:


展开阅读全文

没有更多推荐了,返回首页