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

目录

C罗简介

告别2022世界杯

效果展示

源码分享

投票传送门

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代码

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，从而显示该图片sulEleImg.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--;}}

投票传送门

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。