jquery 实现轮播图_滑动切换

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>轮播图_滑动</title>
		<script src="js/jquery-1.12.3.js"></script>
		<script>
			$(function(){
				var key = true;  //用来控制动画,在上一次动画未完成时,点击左右无效
				$(".rs").on("click",function(){
					//右边
					$(".imgs").css({
						marginLeft: function(index, value) {
							var move = parseInt(value);
							if(move == -1160){   //当图片移动超出界限后,使图片重新定位到第一张
								return 0 + "px";
							}
						}
					});
					if(key){
						key = false;
						$(".imgs").animate({
							marginLeft:"-=290"  //移动图片,累加
						},500,function(){
							key = true;
						});
					}
					
				});
				$(".ls").on("click",function(){
					//左
					$(".imgs").css({
						marginLeft: function(index, value) {
							var move = parseInt(value);
							if(move == 0){
								return -1160 + "px";
							}
						}
					});
					//左边
					if(key){
						key = false;
						$(".imgs").animate({
							marginLeft:"+=290"
						},500,function(){
							key = true;
						});
					}
				});
				
			});
		</script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 290px;
				margin: 200px auto;
				overflow: hidden;
				position: relative;
			}
			ul{
				width: 1800px;
				height: 430px;
				margin-left: -290px;
			}
			ul>li{
				list-style: none;
				float: left;
			}
			span{
				display: block;
				width: 40px;
				font-size: 50px;
				background-color: rgba(0,0,0,0.3);
				color: white;
				text-align: center;
				line-height: 80px;
			}
			div .leftArrow{
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -40px;
			}
			div .rightArrow{
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -40px;
			}
			div>a{
				display: none;
			}
			div:hover a{
				display: inline-block;
			}
		</style>
	</head>

	<body>
		
		<div>
			<ul class="imgs">
				<li><img src="img/item4.jpg" /></li>
				<li><img src="img/item1.jpg" /></li>
				<li><img src="img/item2.jpg" /></li>
				<li><img src="img/item3.jpg" /></li>
				<li><img src="img/item4.jpg" /></li>
				<li><img src="img/item1.jpg" /></li>
			</ul>
			<a href="javascript:void(0)" class="ls"><span class="leftArrow">&lt;</span></a>
			<a href="javascript:void(0)" class="rs"><span class="rightArrow">&gt;</span></a>
			
		</div>
		
	</body>

</html>
jquery 实现 轮播图_滑动切换

猜你喜欢

jquery 实现轮播图_滑动切换
