JavaScript实现的，轮播图左右切换网页动画源码

最新推荐文章于 2024-04-08 18:28:22 发布

mazai5080

最新推荐文章于 2024-04-08 18:28:22 发布

阅读量1.1k

点赞数

分类专栏：前端源码文章标签： javascript 动画 css

本文链接：https://blog.csdn.net/mazai5080/article/details/124621819

版权

前端源码专栏收录该内容

102 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，JavaScript实现的，轮播图左右切换网页动画源码（图1）。送给大家哦，获取方式在本文末尾。

图1

可以点击图片切换（图2）

图2

可以点击左右按钮切换（图3）

图3

源码完整，需要的朋友可以下载学习（图4）

图4

本源码编码：10153，需要的朋友，关注文末公众号后，搜索10153，即可获取。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="static/css/index.css">
	</head>

	<body>
		<div class="content">

			<div class="content-all">
				<button class="left">left</button>
				<button class="right">right</button>
				<div style="clear: both;"></div>
			</div>

			<div class="index"></div>

			<div class="lists">
				<div class="box">
					<div class="item">
						<img src="static/picture/index.jpg" alt="a">
						<p>第一张</p>
					</div>
					<div class="item active">
						<img src="static/picture/index.jpg" alt="b">
						<p>第二张</p>
					</div>
					<div class="item">
						<img src="static/picture/index.jpg" alt="c">
						<p>第三张</p>
					</div>
					<div class="item">
						<img src="static/picture/index.jpg" alt="d">
						<p>第四张</p>
					</div>
					<div class="item">
						<img src="static/picture/index.jpg" alt="e">
						<p>第五张</p>
					</div>
					<div class="item">
						<img src="static/picture/index.jpg" alt="f">
						<p>第六张</p>
					</div>
				</div>
			</div>
		</div>

		<script src="static/js/jquery-1.10.2.js"></script>
		<script src="static/js/index.js" type="text/javascript" ></script>

	</body>

</html>