使用jquery来仿一个小米商城的轮播图。想要了解jquery api可以查看jquery 中文文档

下面是效果：
仿小米商城轮播

完整代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>jquery开发一个简单的轮播图</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.slider {
				width: 790px;
				height: 300px;
				margin: 100px auto;
				position: relative;
			}

			.slider img {
				width: 100%;
				height: 100%;
			}

			.slider > ul > li {
				display: none;
				position: absolute;
			}

			.slider li:first-child {
				display: block;
			}

			.arrow {
				display: none;
			}

			.slider:hover .arrow,
			.slider:hover .box {
				display: block;
			}

			.left,
			.right {
				width: 30px;
				height: 60px;
				font-size: 30px;
				background-color: rgba(0, 0, 0, 0.1);
				color: white;
				position: absolute;
				top: 50%;
				margin-top: -30px;
				line-height: 60px;
				text-align: center;
				cursor: pointer;
			}

			.left:hover,
			.right:hover {
				background-color: rgba(0, 0, 0, 0.5);
			}

			.left {
				left: 0;
			}

			.right {
				right: 0;
			}

			.box {
				width: 75px;
				height: 20px;
				position: absolute;
				left: 50%;
				bottom: 20px;
				margin-left: -30px;
				display: none;
				text-align: center;
			}

			.box li {
				width: 12px;
				height: 12px;
				background-color: white;
				border-radius: 50%;
				float: left;
				margin-left: 12px;
			}

			.show {
				background-color: orangered !important;
			}
		</style>
	</head>
	<body>
		<div class="slider">
			<ul>
				<li>
					<a href="#"><img src="images/1.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="images/2.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="images/3.jpg" alt="" /></a>
				</li>
			</ul>

			<div class="arrow">
				<span class="left">&lt;</span>
				<span class="right">&gt;</span>
			</div>

			<div class="box">
				<ul>
					<li class="show"></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>

		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script>
			$(function () {
				var num = 0;
				$(".right").click(function () {
					num++;
					if (num === $(".slider>ul>li").length) {
						num = 0;
					}
					$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
					$(".box li")
						.eq(num)
						.addClass("show")
						.siblings("li")
						.removeClass("show");
				});

				$(".left").on("click", function () {
					num--;
					if (num === -1) {
						num = $(".slider>ul>li").length - 1;
					}
					$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
					$(".box li")
						.eq(num)
						.addClass("show")
						.siblings("li")
						.removeClass("show");
				});

				$(".box li").on("click", function () {
					var idx = $(this).index();
					$(".slider li").eq(idx).fadeIn().siblings("li").fadeOut();
					$(".box li")
						.eq(idx)
						.addClass("show")
						.siblings("li")
						.removeClass("show");
				});
			});
		</script>
	</body>
</html>