轮播图（jq方法）

<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.sl {
			height: 340px;
			width: 790px;
			margin: 100px;
			position: relative;
			overflow: hidden;
		}

		.sl li {
			float: left;
			overflow: hidden;
		}

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

		.box {
			display: none;
		}

		.sl:hover .box {
			display: block;
		}

		.left,
		.right {
			width: 30px;
			height: 60px;
			background: rgba(0, 5, 6, 0.3);
			position: absolute;
			top: 50%;
			margin-top: -30px;
			cursor: pointer;
			text-align: center;
			line-height: 60px;
			color: #00BFFF;
			font-size: 30px;
			font-weight: bold;
		}

		.left:hover,
		.right:hover {
			background: rgba(4, 5, 9, 0.3);
		}

		.left {
			left: 0;
		}

		.right {
			right: 0;
		}

		#lb {
			width: 500px;
			display: flex;
			justify-content: space-between;
			position: relative;
			color: lavender;
			width: 200px;
			height: 20px;
			font-size: 16px;
			text-align: center;
			line-height: 20px;
			/*指针变成手*/
			cursor: pointer;
			border-radius: 50px;
			top: -30px;
			left: 300px;
			z-index: 3;
		}

		ol li {
			width: 20px;
			border-radius: 50%;
			background: black;
		}

		ol .red {
			background: red;
		}

		#ul {
			width: 7110px;
		}
	</style>

<div class="sl">
		<ul id="ul">
			<li>
				<a href="#"><img src="images/01.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="images/02.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="images/03.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="images/04.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="images/05.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="images/06.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="images/07.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="images/08.jpg" alt="" /></a>
			</li>
			<li>
				<a href="#"><img src="images/01.jpg" alt="" /></a>
			</li>
		</ul>
		<ol id="lb">
			<li class="red">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ol>
		<div class="box">
			<span class="left">&lt;</span>
			<span class="right">&gt;</span>
		</div>
	</div>

$(function () {
			var n = 0;
			var timer = setInterval(move, 1500);
			// 移入
			$('.sl').mouseover(function () { clearInterval(timer); });
			// 移出
			$('.sl').mouseout(function () { timer = setInterval(move, 1500); });
			// 图片移动的函数
			function move() {
				n++;
				if (n == 8) {
					n = 0;
					$('#ul').animate({ marginLeft: -n * $("#ul img").width() + 'px'}, 0);
				}
				$('#ul').animate({ marginLeft: -n * $("#ul img").width() + 'px' }, 1000);
				$('#lb>li').eq(n).addClass('red').siblings().removeClass('red');
			}
			//上一张
			$('.left').click(function () {
				if (n == 0) {
					n = 9;
					$('#ul').animate({
						marginLeft: -n * 790 + 'px'
					}, 1000);
					$('#lb>li').eq(n).addClass('red').siblings().removeClass('red');

				}
				n-=1;
				$('#ul').animate({marginLeft: -n * 790 + 'px'}, 1000);
				$('#lb>li').eq(n).addClass('red').siblings().removeClass('red');

			});
			//下一张
			$('.right').click(function () {
				if (n == 9) {
					n = 0;
					$('#ul').animate({marginLeft: -n * 790 + 'px'}, 1000);
					$('#lb>li').eq(n).addClass('red').siblings().removeClass('red');

				}
				n+=1;
				$('#ul').animate({marginLeft: -n * 790 + 'px'}, 1000);
				$('#lb>li').eq(n).addClass('red').siblings().removeClass('red');

			});
			//指定图片
			$('#lb>li').click(function () {
				n = $(this).index();
				// $(this).addClass('red').siblings().removeClass('red');
				// $('#ul').eq(i).show();
				 move();
			})
		})