JQuery实现移动轮播

最新推荐文章于 2022-07-25 17:31:51 发布

刘一卓

最新推荐文章于 2022-07-25 17:31:51 发布

阅读量198

点赞数

本文链接：https://blog.csdn.net/weixin_44081699/article/details/87939269

版权

<!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>

刘一卓

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现移动轮播

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="jquery-1.8.3.min.js"&gt; &lt;/script&g
复制链接

扫一扫