JQuery实现移动轮播

  • Post author:
  • Post category:其他


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.8.3.min.js">
			
		</script>
		<style type="text/css">
			*{margin: 0;
			padding: 0;}
			.box-1{margin:  0 auto;
			width: 800px;
			height: 800px;
			}
			.box-1 ul {position: relative;
				width: 4800px;
			height: 800px;
			left: 0px;}
			.box-1 li{display: inline-block;}
		</style>
	</head>
	<body>
		<div class="box-1">
			<ul>
			
				<li><img src="img/1481184001.jpg"/></li><li><img src="img/1477450853.jpg"/></li><li><img src="img/1477450804.jpg"/></li><li><img src="img/1473674984.jpg"/></li><li><img src="img/1481184001.jpg"/></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
	
		let n=1
			function fn(){
				console.log(n)
				$("ul").animate({left:(-1)*n*800+"px"},2000, function() {
					if(n==4){n=0,$("ul").css("left","0px")}
					n++
					 
//               $("ul").css("left","0px")
                 fn()
                
               })	
			}
		  
               fn()
        

			
              
		
		 
		

	</script>
</html>



版权声明:本文为weixin_44081699原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。