图片轮播小案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="js/jquery-3.3.1.min.js"></script>
		<style type="text/css">

			
			#userimg {
				/*background:#171A1D;*/
				/*width: 400px;*/
				height: 500px;
				width: 600px;
				/*float: left;*/
				position: relative;
				overflow: hidden;
			}
			
			
			
			
			#imglunbo {
				list-style: none;
				width: 3000px;
				height: 100%;
				padding: 0px;
				margin-left: 200px;
			}
			
			#imglunbo>li {
				width: 200px;
				margin: 0px;
				padding: 0px;
				float: left;
				height: 100%;
				position: relative;
			}
			
			.imga {
				width: 100%;
				position: absolute;
				display: inline-block;
				top: 50%;
				transform: translateY(-50%);
				opacity: .8;
				
			}
			
			.notnowshowimg{
				width: 100%;
				transition: width 1s;
			}
			
			.nowshowimg {
				width: 130%;
				transition: width 1s;
				opacity: 1;
				z-index: 3;
				border: 1px solid #777;
				border-radius: 10px 10px 10px 10px;
				box-shadow: 4px 4px 4px;
			}
			
			#left_gundong {
				/*background: red;*/
				width: 200px;
				height: 100%;
				position: absolute;
				z-index: 2;
				cursor: pointer;
			}
			
			#right_gundong {
				/*background: red;*/
				width: 200px;
				height: 100%;
				position: absolute;
				right: 0px;
				z-index: 2;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {
			   var i =0;
			   $(".imga").eq(i).addClass("nowshowimg");
				//向右轮播
				$('#left_gundong').on("click",function(){
					var position = $('#imglunbo').css("marginLeft");
					
					position = position.substring(0,position.length-2);
					var p = parseInt(position)+200;
					console.log(p);
					position=p+"px";
					$('#imglunbo'). animate({marginLeft:position},1000);
					$(".imga").eq(i).addClass("notnowshowimg");
					$(".imga").eq(i).removeClass("nowshowimg");
					
					
					i--;
					$(".imga").eq(i).addClass("notnowshowimg");
					$(".imga").eq(i).addClass("nowshowimg");
					
				})
				
				
				$('#right_gundong').on("click",function(){
					var position = $('#imglunbo').css("marginLeft");
					
					position = position.substring(0,position.length-2);
					var p = parseInt(position)-200;
					console.log(p);
					position=p+"px";
					$('#imglunbo'). animate({marginLeft:position},1000);
					$(".imga").eq(i).addClass("notnowshowimg");
					$(".imga").eq(i).removeClass("nowshowimg");
					
					i++;
					$(".imga").eq(i).addClass("notnowshowimg");
					$(".imga").eq(i).addClass("nowshowimg");
					
				})
			})
		</script>
	</head>
	
	<body>
		<div >
					<div id="userimg">
						<div id="left_gundong"></div>
						<div id="right_gundong"></div>
						<ul id="imglunbo">
							
							<!--在这里替换你自己的图片-->
							<li><img class="imga" src="img/2 (1).jpg"></li>
							
							<li><img class="imga" src="img/2 (2).jpg"></li>
							
							<li><img class="imga" src="img/2.jpg"></li>
							
							<li><img class="imga" src="img/3 (1).jpg"></li>
							
							
							
							
						</ul>
					</div>
				</div>
		
	</body>
</html>
效果图如下：
图片轮播小案例
相关推荐
