共计 3509 个字符，预计需要花费 9 分钟才能阅读完成。
- 作者简介 ：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
- 座右铭 ：未来是不可确定的，慢慢来是最快的。
- 个人主页 ：极客李华 -CSDN 博客
- 合作方式 ：私聊 +
- 这个专栏内容 ：BAT 等大厂常见后端 java 开发面试题详细讲解，更新数目 100 道常见大厂 java 后端开发面试题。
- 我的 CSDN 社区 ：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
- 微信公众号，抖音，b 站等平台统一叫做 ：极客李华，加入微信公众号领取各种编程资料，加入抖音，b 站学习面试技巧
简介 ：本博客以最通俗移动的详细代码，告诉用户如何构建轮播图。
第一步：搭建框架
body>
div class="overall">
div class="content">
ul>
li>img src="./imgs/1.jpg" alt="">li>
li>img src="./imgs/2.jpg" alt="">li>
li>img src="./imgs/3.jpg" alt="">li>
ul>
ol>
li>li>
li>li>
li>li>
ol>
div>
div>
body>
第二步：CSS 渲染
style>
.overall{
width: 900px;
height: 500px;
align-items: center;
margin: 5% auto;
}
.content{
position: relative;
height: 400px;
}
.content ul{
list-style-type: none;
}
.content ul>li{
width: 600px;
height: 300px;
position: absolute;
transition: 1s;
opacity: 0;
}
.content ul>li img{
width: 900px;
height: 500px;
border-radius: 5%;
border: 5px solid #0e0600;
}
.content ol{
position: relative;
display: grid;
grid-template-columns: repeat(3, 75px);
grid-template-rows: auto;
grid-gap: 1em;
gap:1em;
float: right;
margin-top: 450px;
list-style: none;
top: 0;
left: 0;
}
.content ol li{
width: 25px;
height: 10px;
font-size: 15px;
line-height: 20px;
float: left;
text-align: center;
border-radius: 2em;
border: 5px solid #af9d9d;
}
style>
第三步：JS 逻辑
script>
window.onload = function()
{
var content = this.document.getElementsByClassName("content")[0];
var li = content.getElementsByTagName("li");
function fun(i, j)
{
li[i].style.opacity=1;
li[j].style.opacity=0;
li[i + 3].style.backgroundColor = "#ffffff";
li[j + 3].style.backgroundColor = "#00000000";
}
fun(0, 1);
var i = 0;
function auto()
{
i ++;
if(i >= 3)
{
i = 0;
fun(0, 2);
}
else
{
fun(i, i - 1);
}
}
timer = this.setInterval(auto, 2000);
content.onmouseover = function ()
{
clearInterval(timer);
}
content.onmouseout = function ()
{
timer = setInterval(auto, 2000);
}
var j = 0;
for(; j 3; j++)
{
li[j + 3].index = j;
li[j + 3].onclick = function()
{
fun(this.index, i)
i = this.index;
}
}
}
script>
运行结果 ：
代码汇总
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>Apple14 介绍 title>
style>
.overall{
width: 900px;
height: 500px;
align-items: center;
margin: 5% auto;
}
.content{
position: relative;
height: 400px;
}
.content ul{
list-style-type: none;
}
.content ul>li{
width: 600px;
height: 300px;
position: absolute;
transition: 1s;
opacity: 0;
}
.content ul>li img{
width: 900px;
height: 500px;
border-radius: 5%;
border: 5px solid #0e0600;
}
.content ol{
position: relative;
display: grid;
grid-template-columns: repeat(3, 75px);
grid-template-rows: auto;
grid-gap: 1em;
gap:1em;
float: right;
margin-top: 450px;
list-style: none;
top: 0;
left: 0;
}
.content ol li{
width: 25px;
height: 10px;
font-size: 15px;
line-height: 20px;
float: left;
text-align: center;
border-radius: 2em;
border: 5px solid #af9d9d;
}
style>
head>
body>
div class="overall">
div class="content">
ul>
li>img src="./imgs/1.jpg" alt="">li>
li>img src="./imgs/2.jpg" alt="">li>
li>img src="./imgs/3.jpg" alt="">li>
ul>
ol>
li>li>
li>li>
li>li>
ol>
div>
div>
body>
script>
window.onload = function()
{
var content = this.document.getElementsByClassName("content")[0];
var li = content.getElementsByTagName("li");
function fun(i, j)
{
li[i].style.opacity=1;
li[j].style.opacity=0;
li[i + 3].style.backgroundColor = "#ffffff";
li[j + 3].style.backgroundColor = "#00000000";
}
fun(0, 1);
var i = 0;
function auto()
{
i ++;
if(i >= 3)
{
i = 0;
fun(0, 2);
}
else
{
fun(i, i - 1);
}
}
timer = this.setInterval(auto, 2000);
content.onmouseover = function ()
{
clearInterval(timer);
}
content.onmouseout = function ()
{
timer = setInterval(auto, 2000);
}
var j = 0;
for(; j 3; j++)
{
li[j + 3].index = j;
li[j + 3].onclick = function()
{
fun(this.index, i)
i = this.index;
}
}
}
script>
html>
如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历，让大家更好学习编程，我的抖音，B 站也叫极客李华。
原文地址: html 轮播图
正文完
