轮播图 

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>

	.banner {
		width: 100%;
		height: 500px;
		margin: auto;
		position: relative;
		overflow: hidden;
	}

	.img {
		position: absolute;
		top: 0;
		left: 0;
		height: 500px;
	}

	.img li {
		float: left;
		height: 500px;
	}

	.point {
		position: absolute;
		bottom: 15px;
		width: 100%;
		text-align: center;
		font-size: 0;
	}

	.point li {
		width: 20px;
		height: 20px;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 100%;
		display: inline-block;
		margin: 0 5px;
		cursor: pointer;
	}

	.slide_btn span {
		display: block;
		cursor: pointer;
	}

	.slide_btn .prev,
	.slide_btn .next {
		position: absolute;
		top: 50%;
		margin-top: -50px;
	}

	.slide_btn .prev {
		left: -80px;
	}

	.banner:hover .slide_btn .prev {
		left: 10px;
	}

	.banner:hover .slide_btn .next {
		right: 10px;
	}

	.slide_btn .next {
		right: -80px;
	}

	.point .active {
		background-color: #fff;
	}

	.slide_content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.slide_card {
		width: 1200px;
		height: 250px;
		margin: auto;
		background-color: rgb(255, 255, 255, 0.4);
		border-radius: 4px;
		color: var(--white-color);
	}

	.slide_title {
		text-shadow: 1px 1px 8px #2f2f2f;
		margin-top: 55px;
		margin-bottom: 15px;
	}

	.slide_desc {
		text-shadow: 4px 4px 4px #2f2f2f;
		line-height: 35px;
		padding: 0 15rem;
	}
</style>
</head>

<body>
	<div class="banner">
		<ul class="img">
			<li>
				<img src="images/banner1.png" alt="banner_img_01">
				<!-- <div class="slide_content">
					<div class="slide_card t_center">ytujdyj</div>
				</div> -->
			</li>
			<li><img src="images/banner2.png" alt="banner_img_02"></li>
			<li><img src="images/banner3.png" alt="banner_img_03"></li>
		</ul>
		<ul class="point"></ul>
		<div class="slide_btn">
			<span class="prev"><img src="images/icon-left.png" alt=""></span>
			<span class="next"><img src="images/icon-right.png" alt=""></span>
		</div>
	</div>
<script src="public/jquery-3.1.1.js"></script>
	<script>
		var i = 0;
		var timer = null;
		var banner = $('.banner');
		var prev = document.querySelector(".prev");
		var next = document.querySelector(".next");
		var img = $('.img')
		var imgWidth = $('.img img').width()
		for (var j = 0; j < $('.img li').length; j++) { 
			$('.point').append('<li></li>')
		}
		$('.point li').first().addClass('active'); //给第一个圆点添加样式
		var firstimg = $('.img li').first().clone(); //复制第一张图片
		img.append(firstimg).width($('.img li').length * imgWidth); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度

		// 下一个按钮
		next.addEventListener("click", function () {
			i++;
			if (i == $('.img li').length) {
				i = 1; //这里不是i=0
				img.css({
					left: 0
				}); //保证无缝轮播，设置left值
			};

			img.stop().animate({
				left: -i * imgWidth
			}, 600);
			if (i == $('.img li').length - 1) { //设置小圆点指示
				$('.point li').eq(0).addClass('active').siblings().removeClass('active');
			} else {
				$('.point li').eq(i).addClass('active').siblings().removeClass('active');
			}
		})

		// 上一个按钮
		prev.addEventListener("click", function () {
			i--;
			if (i == -1) {
				i = $('.img li').length - 2;
				img.css({
					left: -($('.img li').length - 1) * imgWidth
				});
			}
			img.stop().animate({
				left: -i * imgWidth
			}, 600);
			$('.point li').eq(i).addClass('active').siblings().removeClass('active');
		})

		//鼠标划入圆点
		$('.point li').mouseover(function () {
			var _index = $(this).index();
			img.stop().animate({
				left: -_index * imgWidth
			}, 150);
			$('.point li').eq(_index).addClass('active').siblings().removeClass('active');
		})

		//定时器自动播放
		timer = setInterval(function () {
			i++;
			if (i == $('.img li').length) {
				i = 1;
				img.css({
					left: 0
				});
			};

			img.stop().animate({
				left: -i * imgWidth
			}, 600);
			if (i == $('.img li').length - 1) {
				$('.point li').eq(0).addClass('active').siblings().removeClass('active');
			} else {
				$('.point li').eq(i).addClass('active').siblings().removeClass('active');
			}
		}, 3000)

		//鼠标移入，暂停自动播放，移出，开始自动播放
		banner.hover(function () {
			clearInterval(timer);
		}, function () {
			timer = setInterval(function () {
				i++;
				if (i == $('.img li').length) {
					i = 1;
					img.css({
						left: 0
					});
				};

				img.stop().animate({
					left: -i * imgWidth
				}, 600);
				if (i == $('.img li').length - 1) {
					$('.point li').eq(0).addClass('active').siblings().removeClass('active');
				} else {
					$('.point li').eq(i).addClass('active').siblings().removeClass('active');
				}
			}, 3000)
		})
	</script>

</html>
posted @ 2021-01-26 09:53  JaneLifeVlog  阅读(44)  评论(0)    收藏  举报