jQuery轮播图【初学者】

丶君莫笑丶

于 2024-01-09 13:55:52 发布

阅读量615

点赞数 20

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_64693079/article/details/135477621

版权

效果：

效果视频

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.1.1.js"></script>
		<style>
			body,
			ul {
				padding: 0px;
				margin: 0px;
			}

			ul {
				list-style: none;
			}

			#box,
			#box ul li,
			#box ul li img {
				width: 500px;
				height: 300px;
			}

			#box {
				margin: auto;
				overflow: hidden;
				position: relative;
			}

			#box #circle {
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50px);
			}

			#box #circle li {
				width: 15px;
				height: 15px;
				border-radius: 10px;
				float: left;
				margin: 0px 5px;
				background-color: white;
				cursor: pointer;
			}

			#box #circle li.active {
				background-color: red;
			}
		</style>
		<script>
			$(function() {
				var ul = $("<ul id='circle'></ul>") // 创建一个带有id为'circle'的ul元素，并将其添加到#box中
				$("#img li").each(function() {
					ul.append("<li></li>") // 对每个图片，向ul添加一个相应的圆圈
				})
				$("#box").append(ul);
				var index = 0; // 初始索引值
				change(index); // 调用change函数显示初始图片和圆圈

				// 更改显示的图片和激活的圆圈的函数
				function change(index) {
					$("#circle li").removeClass("active").eq(index).addClass("active");
					$("#img li").eq(index).fadeIn().siblings().fadeOut();
				}

				// 切换到下一张图片的函数
				function nextImage() {
					index = (index + 1) % $("#img li").length;
					change(index);
				}

				var speed = 2000; //控制轮播的速度 1000=1秒
				var interval = setInterval(nextImage, speed); // 设置一个间隔，每秒自动切换到下一张图片

				// 在悬停在#box上时暂停间隔
				$("#box").hover(
					function() {
						if (interval != null) {
							clearInterval(interval);
							interval = null;
						}
					},
					function() {
						if (interval == null) {
							interval = setInterval(nextImage, speed);
						}
					}
				);

				// 为每个圆圈添加点击事件处理程序，以手动切换图片
				$("#circle li").each(function() {
					var index = $(this).index();
					$(this).on('click', function() {
						change(index);
					});
				});
			})
		</script>
	</head>
	<body>
		<div id="box">
			<ul id="img">
				<li><img src="./img/spring.jpg" alt="" /></li>//修改成自己的图片地址
				<li><img src="./img/summer.jpg" alt="" /></li>
				<li><img src="./img/autumn.jpg" alt="" /></li>
				<li><img src="./img/winter.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
</html>