C罗轮播图（HTML+CSS+JS）

Java Fans

已于 2022-12-14 18:06:07 修改

阅读量1k

点赞数 14

分类专栏：前端案例分享专栏文章标签：程序人生

于 2022-12-14 17:28:23 首次发布

Java Fans

本文链接：https://blog.csdn.net/hh867308122/article/details/128304460

版权

前端案例分享专栏专栏收录该内容

15 篇文章 10 订阅

订阅专栏

✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：前端案例分享专栏
✨特色专栏：国学周更-心性养成之路
🥭本文内容：C罗轮播图（HTML+CSS+JS）
更多内容点击👇
JS新年倒计时

C罗简介

克里斯蒂亚诺·罗纳尔多（Cristiano Ronaldo dos Santos Aveiro），简称“C罗”，1985年2月5日出生于葡萄牙马德拉岛丰沙尔，葡萄牙职业足球运动员，司职边锋/中锋。

告别2022世界杯

北京时间 12 月 11 日凌晨，世界杯1/4决赛，葡萄牙0：1不敌摩洛哥，无缘世界杯4强。C罗首度发声，以下是 C罗的长文：

为葡萄牙赢得世界杯冠军是我职业生涯中最大的梦想。幸运的是，我也赢得了很多国际级别的冠军，包括为葡萄牙赢得的冠军，但让我们国家的名字登上世界顶点是我最大的梦想。

我为此而战！为了这个梦想，我努力奋斗！过去16年，我连续5届世界杯进球，总是和伟大的球员们并肩作战，并得到了数百万葡萄牙人的支持，我也付出了自己的全部。我把一切都留在了球场上，我从不会回避战斗，我也从未放弃那个梦想。

不幸的是，昨天梦想结束了。这不值得有太多回应，外界说了很多，写了很多，推测了很多。我只想让每个人知道，我对葡萄牙的奉献从未改变。我永远是一个所有人的梦想而战的人，永远不会背弃我的队友和国家。

最后，没有太多要说的了。谢谢你，葡萄牙。谢谢你，卡塔尔。追逐梦想总是美好的……如今，是时候让我成为一名优秀的向导，去让每个人都能得出自己的结论。

效果展示

这个视屏是做的C罗轮播图的效果展示视屏。

源码分享

完整的代码分享，希望对爱学习的博友来说，是个好素材！

1、HTML代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="css/cluo.css">
	</head>
	<body>
		<!-- 轮播图整体容器 -->
		<div class="div_Content">
			<!-- 八张轮播图 -->
			<ul class="ul_Lun">
				<li><img src="./img/1.jpg"></li>
				<li><img src="./img/2.jpg"></li>
				<li><img src="./img/3.jpg"></li>
				<li><img src="./img/4.jpg"></li>
				<li><img src="./img/5.jpg"></li>
				<li><img src="./img/6.jpg"></li>
				<li><img src="./img/7.jpg"></li>
				<li><img src="./img/8.jpg"></li>
			</ul>
			<!-- 左右点击按钮 -->
			<div class="div_Buttons">
				<img class="imgBtn1" src="./img/左箭头-选中.png">
				<img class="imgBtn2" src="./img/右箭头-选中.png">
			</div>
			<!-- 左下角八个浮动点 -->
			<div class="div_Points">
				<ul class="ul_Points">
					<li class="liStyle"></li>
					<li class="liStyle"</li>
					<li class="liStyle"</li>
					<li class="liStyle"</li>
					<li class="liStyle"</li>
					<li class="liStyle"</li>
					<li class="liStyle"</li>
					<li class="liStyle"</li>
				</ul>
			</div>
		</div>
		
		<script type="text/javascript" src="js/cluo.js"></script>
	</body>
</html>

2、css代码

			.div_Content {
				position: relative;
				width: 900px;
				height: 600px;
				margin: 100px auto;
			}

			.ul_Lun {
				list-style: none;
			}

			.ul_Lun>li {
				position: absolute;
			}

			.ul_Lun img {
				width: 900px;
				height: 600px;
			}

			.div_Points {
				position: relative;
				z-index: 1;
				float: left;
			}

			.div_Points>ul {
				list-style: none;
				margin-left: -20px;
			}
			.liStyle {
				margin-left: 2px;
				margin-top: 20px;
				width: 8px;
				height: 8px;
				/* background: rgba(255, 255, 255, .4); */
				float: left;
				border-radius: 50%;
				border: 3px solid rgba(0, 0, 0, .05);
			}
			.liStyle:hover{
				width: 8px;
				height: 8px;
				background: rgba(255, 255, 255, 1);
				border: 3px solid rgba(0, 0, 0, .05);
			}

			.pointStyle {
				background: rgba(255, 255, 255, 1);
			}
			.pointOldStyle {
				background: rgba(255, 255, 255, .4);
			}
			.div_Buttons {
				position: relative;
				z-index: 1;
			}

			.imgBtn1 {
				position: relative;
				width: 50px;
				height: 80px;
				float: left;
				left: 40px;
				top: 230px;
				filter: opacity(50%);
			}

			.imgBtn2 {

				position: relative;
				width: 50px;
				height: 80px;
				float: right;
				right: -40px;
				top: 230px;
				filter: opacity(50%);
			}

3、引用外部JavaScript文件：js代码

			var num = 0;
			var flag=true;
			wheelTimes(num);
			var myVar = setInterval(wheelTimes, 2000);
			function wheelTimes() {
				//获取轮播图片ul里的所有li元素；
				var ulEleImg = document.getElementsByClassName('ul_Lun').item(0).children;
				//遍历轮播图片ul，给所有li的zIndex属性初始化层级值为0；
				for (let s of ulEleImg) {
					s.style.zIndex = '0';
				}
				//设置当前的图片的层级为1，从而显示该图片s
				ulEleImg.item(num).style.zIndex = '1';
				
				//获取左下角亮点ul里的所有li元素；
				var ulEle = document.getElementsByClassName('ul_Points').item(0).children;
				console.log(ulEle);
				for (let sUlEle of ulEle) {
					sUlEle.className='liStyle pointOldStyle';
				}
				ulEle.item(num).className = 'liStyle pointStyle';
				if(num==ulEleImg.length-1){
					flag=false;
				}else if(num==0){
					flag=true;
				}
				if(flag){
					num++;
				}else{
					num--;
				}

			}