jquery实现动态左右无缝轮播图

最新推荐文章于 2024-06-13 21:16:17 发布

web 沐

最新推荐文章于 2024-06-13 21:16:17 发布

阅读量1.1k

点赞数

文章标签： jquery js HTML css

本文链接：https://blog.csdn.net/weixin_45582846/article/details/100172629

版权

JQ代码实现动态无缝轮播图功能

相比之下
运用jquery比js原生代码
书写更为方便简介通俗易懂

以下为代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.box{
				width: 500px;
				height: 300px;
				border: 1px solid black;
				box-sizing: border-box;
				margin: 0 auto;
				position: relative;
				/* overflow: hidden; */
			}
			ul{
				width: auto;
				height: 300px;
				position: absolute;
				left: -500px;
			}
			li{
				width: 500px;
				height: 300px;
				float: left;
			}
			img{
				width: 500px;
				height: 300px;
			}
			button{
				position: absolute;
				width: 50px;
				height: 30px;
				background: white;
				top: 45%;
			}
			.zuo{
				left: 0;
			}
			.you{
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><img src="img/background.png" ></li>
				<li><img src="img/banner.jpg" ></li>
				<li><img src="img/banner.png" ></li>
				<li><img src="img/banner3.jpg" ></li>
				<li><img src="img/brand2_Ns.png" ></li>
				<li><img src="img/sub_banner.jpg" ></li>
				<li><img src="img/sub_banner.jpg" ></li>
				<li><img src="img/sub_banner.jpg" ></li>
			</ul>
			<button type="button" class="zuo">&lt;</button>
			<button type="button" class="you">&gt;</button>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			/* 动态修改ul的宽度 */
			var width = $(" ul li").width()*$("ul li").length;
			width = width+"px";
			$("ul").css("width",width)
			
			/* 点击向右滑动 */
			$(".you").click(function(){
				$("ul").stop(false,true);
				$("ul").animate({left:"-1000px"},function(){
					$("ul li:eq(0)").appendTo($("ul"))
					$("ul").css("left","-500px")
				})
			})
			/* 点击向左滑动 */
			$(".zuo").click(function(){
				$("ul").stop(false,true);
				$("ul").animate({left:"0"},function(){
					$("ul li:last-child").prependTo($("ul"))
					$("ul").css("left","-500px")
				})
			})
		})
	</script>
</html>

如有疑问或者问题请留言练习小编！！！！！！！