✅作者简介：热爱国学的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代码
<!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--;
}
}投票传送门
码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。
