Java页面自动轮播图片

转载

网线小游侠 2024-10-12 10:21:02

文章标签 Java页面自动轮播图片 javascript 开发语言 html jquery 文章分类 Java 后端开发

简单轮播图

简单轮播图的思路：
1. HTML结构部分：
2. CSS样式部分：
3. JavaScript部分（使用了jQuery库）：
4. 实现原理

简单轮播图的思路：

思路与步骤如下：

创建一个HTML文档，编写基本结构和必要的元素。
在头部的样式块中定义所需的CSS样式，包括外观、尺寸和位置信息。
在body中使用div元素创建一个类名为"skin"的容器，该容器包含多个类名为"s"的子容器。
在每个"s"子容器的style属性中设置背景图像URL，这些图像将作为幻灯片的内容。
在"skin"容器中创建一个类名为"head"的容器，该容器包含多个img元素，分别对应幻灯片图片的缩略图。
为第一个"s"子容器和第一个img元素添加相关的CSS类，使其显示为初始状态，即第一张幻灯片和对应的缩略图高亮显示。
在script标签中，使用jQuery库选择第一个"s"子容器并显示，选择第一个img元素并添加高亮显示的类。
使用jQuery的click事件监听器，为每个img元素添加点击事件。
当任何img元素被点击时，移除其他img元素的高亮显示类，为点击的元素添加高亮显示类。
获取被点击的img元素的索引，并将其赋值给变量index。
根据索引index选择对应的"s"子容器并显示，同时隐藏其他带有"s"类的兄弟容器。
定义变量i作为轮播变量，初始值为1。
使用setInterval函数创建一个定时器，每隔2秒触发一次。
在定时器函数内，通过触发点击事件选择第i张缩略图。
如果i递增后等于4，重新将i设置为0，使轮播非循环。
结束代码编写。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.skin {
				width: 1280px;
				height: 720px;
				margin: 50px auto;
				position: relative;
			}

			.head {
				width: 550px;
				height: 180px;
				position: absolute;
				left: 50px;
				bottom: 50px;
				font-size: 0px;
			}

			.head img {
				width: 100px;
				height: 180px;
				margin-right: 10px;
			}

			.skin .s {
				width: 1280px;
				height: 720px;
				display: none;
			}

			.head-focus {
				box-shadow: 0 0 10px #fff;
				transform: translateY(-2px);
			}
		</style>
	</head>
	<body>
		<div class="skin">
			<div class="s" style="background-image: url(img/skin/Ezreal_Splash_Centered_3.jpg);"></div>
			<div class="s" style="background-image: url(img/skin/Ezreal_Splash_Centered_5.jpg);"></div>
			<div class="s" style="background-image: url(img/skin/Ezreal_Splash_Centered_6.jpg);"></div>
			<div class="s" style="background-image: url(img/skin/Ezreal_Splash_Centered_7.jpg);"></div>
			<div class="s" style="background-image: url(img/skin/Ezreal_Splash_Centered_8.jpg);"></div>

			<div class="head">
				<img src="img/head/Ezreal_3.jpg" alt="">
				<img src="img/head/Ezreal_5.jpg" alt="">
				<img src="img/head/Ezreal_6.jpg" alt="">
				<img src="img/head/Ezreal_7.jpg" alt="">
				<img src="img/head/Ezreal_8.jpg" alt="">
			</div>
		</div>


		<script src="js/jquery.js"></script>
		<script>
			//第一张大图显示 
			$(".s:first-child").show();
			// 第一张小图高亮
			$(".head img:first-child").addClass("head-focus");
			// 小图点击事件
			$(".head img").click(function() {
				// 被单击的节点添加class,其同级节点移除class
				$(this).addClass("head-focus").siblings().removeClass("head-focus");
				//获取当前节点的索引
				var index = $(this).index();
				//让index成为轮播变量
				i=index;
				//对应索引的大图显示,其带有"s"class的兄弟节点隐藏
				$(".skin .s:eq(" + index + ")").fadeIn("500").siblings(".s").hide();
			});

			// 轮播变量
			var i = 1;
			// 每隔2s自动点击下一张
			setInterval(() => {
				// 第i张小图触发点击事件
				$(".head img:eq(" + i + ")").click();
				// 轮播
				if (i++ == 4) {
					i = 0;
				}
			}, 2000)
		</script>
	</body>
</html>

这段代码是一个简单的图片轮播效果的实现。以下是对代码的详细描述：

1. HTML结构部分：

代码中包含一个<div class="skin"></div>元素，表示整个皮肤容器。它具有固定的宽度和高度，位于页面中央上方的位置。
在皮肤容器内部，有包含多个<div class="s"></div>元素，每个元素代表一张背景图。初始情况下，这些元素都是隐藏的，并且通过style属性设置了背景图片。
在皮肤容器的底部，有一个.head元素，内部包含多个<img>元素。这些<img>元素用于显示对应的缩略图。

2. CSS样式部分：

使用CSS选择器对各个元素进行样式定义。设置了皮肤容器、缩略图容器、背景图片样式等。
.skin容器通过设置position: relative使其成为定位参照点。
.s容器代表每张背景图，设置了固定的宽度和高度，并使用display: none设置为隐藏状态。

3. JavaScript部分（使用了jQuery库）：

通过$('.s:first-child').show()，将第一张背景图显示。
通过$('.head img:first-child').addClass('head-focus')，给第一张缩略图添加一个head-focus类，使其高亮显示。
当点击缩略图时，通过$('.head img').click(function(){})绑定点击事件。
在点击事件处理程序中，通过$(this).addClass('head-focus').siblings().removeClass('head-focus')，将当前点击的缩略图添加head-focus类，并将其他缩略图移除该类，实现高亮切换。
通过$(this).index()获取当前点击缩略图的索引，并将其赋值给变量index。
通过$('.skin .s:eq(' + index + ')').fadeIn('500').siblings('.s').hide()，让对应索引的背景图显示，其他背景图隐藏。
设置变量i表示轮播位置，它的初始值为1。
使用setInterval()函数设定每隔2秒触发一次的定时器，并设置回调函数。
在每次定时器触发时，通过$('.head img:eq(' + i + ')').click()触发对应位置的缩略图点击事件。
轮播位置自增，当i增加到4时，重置为0，实现循环轮播。