无缝轮播

最新推荐文章于 2022-07-24 19:49:23 发布

Tonyhew

最新推荐文章于 2022-07-24 19:49:23 发布

阅读量217

点赞数 2

本文链接：https://blog.csdn.net/Tonyhew/article/details/82683689

版权

无缝轮播

本人的第一篇博客，先从简单的轮播图开始

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>

		<div class="banner">
			<ul class="bannerimg">
				<li>
					<a href="#">
						<img src="img/ava_02.jpg" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="img/ava_03.jpg" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="img/ava_04.jpg" />
					</a>
				</li>
				<li>
					<a href="#">
						<img src="img/ava_05.jpg" />
					</a>
				</li>
			</ul>
			<ul class="num">

			</ul>
			<div class="btn btnl">&lt;</div>
			<div class="btn btnr">&gt;</div>
		</div>

		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
			$(function() {

				var i = 0;
				var clone = $(".banner .bannerimg li").first().clone(); //克隆第一张图片
				$(".banner .bannerimg").append(clone); //把克隆好的添加上
				var size = $(".banner .bannerimg li").size(); //获取图片的数量

				//添加指示器
				for(var j = 0; j < size - 1; j++) {
					$(".banner .num").append("<li></li>");
				}

				$(".banner .num li").first().addClass("on");

				//向左移动函数
				function moveL() {
					i++;
					if(i >= size) {
						$(".banner .bannerimg").css({
							left: 0
						});
						i = 1;
					}
					$(".banner .bannerimg").stop().animate({
						left: -i * 600
					}, 500);
					if(i == size - 1) {
						$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
					} else {
						$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
					}

				}

				//向右移动函数
				function moveR() {
					i--;
					if(i < 0) {
						$(".banner .bannerimg").css({
							left: -(size - 1) * 600
						});
						i = size - 2;
					}
					$(".banner .bannerimg").animate({
						left: -i * 600
					});
					$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");

				}

				$(".banner .num li").hover(function() {
					var index = $(this).index(); //获取索引值
					i = index;
					$(".banner .bannerimg").stop().animate({
						left: -index * 600
					}, 500);
					$(this).addClass("on").siblings().removeClass("on");
				});

				//自动轮播
				var t = setInterval(moveL, 2000);
				$(".banner").hover(function() {
					clearInterval(t);
				}, function() {
					t = setInterval(moveL, 2000);
				});

				$(".banner .btnl").click(moveR);
				$(".banner .btnr").click(moveL);

			});
		</script>
	</body>

</html>