以下是经过处理后的三款轮播图样式美化的HTML代码及其简要摘要：
样式一：利用轮播图轮播多张图片，提供左、右箭头按钮以及数字点按按钮来切换图片，背景可渐变，功能全面。
样式二：简洁的轮播图设计，使用大图轮播形式展示多张图片，并配有小圆点控制条及左右箭头按钮进行切换，样式简洁且优雅。
样式三：轮播图样式类似第二款，同时加入半透明背景和模糊效果，增强视觉效果，同样提供小圆点及左右箭头进行图片切换。
三款样式均提供了轮播图功能，可根据需求选择合适的样式进行美化。
样式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>十九域博客</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: rgb(39, 35, 35);
display: flex;
justify-content: center;
align-items: center;
}
.admin {
width: 350px;
height: 542px;
position: relative;
top: 60px;
}
li {
list-style: none;
}
.b {
width: 100%;
height: 550px;
position: absolute;
background-size: cover;
opacity: 0;
transition: .5s;
}
.b:nth-child(1) {
background-image: url("1.gif");
}
.b:nth-child(2) {
background-image: url("2.gif");
}
.b:nth-child(3) {
background-image: url("3.gif");
}
.b:nth-child(4) {
background-image: url("4.gif");
}
.b:nth-child(5) {
background-image: url("5.gif");
}
.b:nth-child(6) {
background-image: url("6.gif");
}
.b:nth-child(7) {
background-image: url("7.gif");
}
.b:nth-child(8) {
background-image: url("8.gif");
}
.b:nth-child(9) {
background-image: url("9.gif");
}
.b.bb {
opacity: 1;
}
.c,
.d {
width: 70px;
height: 550px;
background: rgba(207, 90, 211, .2);
position: absolute;
top: 0;
line-height: 550px;
text-align: center;
font-size: 70px;
color: blueviolet;
cursor: pointer;
user-select: none;
transition: .3s;
}
.c:hover,
.d:hover {
background-color: rgba(255, 255, 255, .6);
color: #000;
}
.c {
left: -70px;
}
.d {
right: -70px;
}
.e1 {
width: 95%;
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left: 0;
right: 0;
bottom: 10px;
margin: auto;
}
.e {
border-radius: 50%;
border: #000 solid 5px;
width: 15px;
height: 15px;
opacity: .7;
cursor: pointer;
transition: .4s;
/* background-color: #fff; */
}
.e:hover {
opacity: 1;
background-color: rgba(162, 59, 202, 0.7);
}
.e.ee {
opacity: 1;
background-color: rgb(46, 33, 158);
}
</style>
</head>
<body>
<div class="admin">
<div class="a">
<ul>
<li class="b bb"></li>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>
</div>
<div class="c"><</div>
<div class="d">></div>
<ul class="e1">
<li data-x="0" class="e ee"></li>
<li data-x="1" class="e"></li>
<li data-x="2" class="e"></li>
<li data-x="3" class="e"></li>
<li data-x="4" class="e"></li>
<li data-x="5" class="e"></li>
<li data-x="6" class="e"></li>
<li data-x="7" class="e"></li>
<li data-x="8" class="e"></li>
</ul>
</div>
<script>
var b = document.getElementsByClassName("b")
var e = document.getElementsByClassName("e")
var c = document.querySelector(".c")
var d = document.querySelector(".d")
var inder = 0
var tis
// alert(b.length)
function aa() {
for (var i = 0; i < b.length; i++) {
b[i].className = "b"
}
for (var i = 0; i < e.length; i++) {
e[i].className = "e"
}
}
function aaa() {
aa()
b[inder].className = "b bb"
e[inder].className = "e ee"
}
c.onclick = function () {
clearInterval(tis)
ts()
if (inder > 0) {
inder--
} else {
inder = b.length - 1
}
aaa()
}
d.onclick = function () {
clearInterval(tis)
ts()
if (inder < b.length - 1) {
inder++
} else {
inder = 0
}
aaa()
}
ts()
function ts() {
tis = setInterval(function () {
aaa()
if (inder < b.length - 1) {
inder++
} else {
inder = 0
}
}, 2000);
}
for (var i = 0; i < e.length; i++) {
e[i].onclick = function () {
var p = this.getAttribute("data-x")
inder = p
aaa()
// alert(p)
}
}
</script>
</body>
</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>十九域博客</title>
<style>
* {
padding: 0px;
margin: 0px;
list-style: none;
bottom: 0;
text-decoration: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* 背景渐变 */
/* background-image: linear-gradient(to bottom right,
#91defe,
#99c0f9,
#bdb6ec,
#d7b3e3,
#efb3d5,
#f9bccc); */
background-color: #b7c4d8;
}
.shell {
width: 1200px;
height: 700px;
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 10px 5px 50px rgba(122, 39, 39, 0.39);
}
.images {
width: 500%;
height: 100%;
display: flex;
position: absolute;
left: 0;
transition: .2s;
}
.img {
width: 100%;
background-size: cover;
}
.img:nth-child(1) {
background-image: url("img/04.png");
}
.img:nth-child(2) {
background-image: url("img/02.png");
}
.img:nth-child(3) {
background-image: url("img/03.png");
}
.img:nth-child(4) {
background-image: url("img/01.png");
}
.img:nth-child(5) {
background-image: url("img/05.png");
}
.min {
display: flex;
justify-content: space-evenly;
position: absolute;
bottom: 40px;
width: 30%;
z-index: 999;
left: 50%;
transform: translateX(-50%);
}
.m {
width: 20px;
height: 20px;
cursor: pointer;
border-radius: 50%;
border: solid rgba(255, 255, 255, 0.5) 5px;
background-color: #fff;
}
.button {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: space-between;
user-select: none;
}
.button-left,
.button-right {
font-size: 50px;
background-color: rgba(102, 123, 161, 0.288);
padding: 0 20px;
cursor: pointer;
line-height: 700px;
color: #fff;
}
.bg{
width: 100vw;
height: 100vh;
background-image: url(./img/04.png);
z-index: -9999;
position: absolute;
filter:blur(12px);
opacity: .5;
}
</style>
</head>
<body>
<div class="shell">
<ul class="images">
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
</ul>
<ul class="min">
<li class="m"></li>
<li class="m"></li>
<li class="m"></li>
<li class="m"></li>
<li class="m"></li>
</ul>
<div class="button">
<div class="button-left"><</div>
<div class="button-right">></div>
</div>
</div>
<div class="bg"></div>
</body>
<script>
let left = document.querySelector(".button-left")
let right = document.querySelector(".button-right")
let m = document.querySelectorAll(".m")
let images = document.querySelector(".images")
// 我们先设置一个index用来计算和控制图片的位置，再设置一个time作为定时器
let index = 0
let time// 在这里我们先创建一个position为复用函数，作用就是结合index来定义当前图片的位置的
function position() {
images.style.left = (index * -100) + "%"
}
// 然后我们创建一个复用函数add为加函数，如果当前图片的位置值index大于等于当前图片数量的话，
// 就说明超出了计算范围，所以得清零，如若不然index就加一
function add() {
if (index >= m.length - 1) {
index = 0
} else {
index++
}
}
// 反之desc为减函数，如果当前图片的位置值index小于1了，那么他的值就反弹到最顶端，也就是轮播图的最后面，如若不然index就减一
function desc() {
if (index < 1) {
index = m.length - 1
} else {
index--
}
}
// 创建一个timer来当做复用时间的函数，，每隔3秒钟index就加一，然后加入增加add函数和desc函数来判断一下，再加入定位函数
function timer() {
time = setInterval(() => {
index++
desc()
add()
position()
}, 3000)
}
// 接下来我们设置一下按钮，left为左边的按钮，因为点击时图片会反方向倒退，所以我们套入desc减函数进去，顺便定位一下
// 点击的时候我们必须先把定时器给停掉再重新执行一遍，不然会在你点击下一张图片时，定时器倒计时一到也跟着生效，这样子就会连跳两张图片了
left.addEventListener("click", () => {
desc()
position()
clearInterval(time)
timer()
})
// 右边的按钮和左边也是差不多
right.addEventListener("click", () => {
add()
position()
clearInterval(time)
timer()
})
// 在弄好左右两个按钮的时候，我们还需要生效下面的小图片按钮，
// 首先我们先遍历一遍，然后获取当前点击的那个小图片按钮的值并赋值给index，这样子就可以随之跳转
for (let i = 0; i < m.length; i++) {
m[i].addEventListener("click", () => {
index = i;
position();
clearInterval(time)
timer()
})
}
// 最后的最后我们将定时器开起来，这样子图片就可以自动轮播啦
// timer()
</script>
</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>十九域博客</title>
<style>
* {
padding: 0px;
margin: 0px;
list-style: none;
bottom: 0;
text-decoration: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* 背景渐变 */
background-image: linear-gradient(to bottom right,
#91defe,
#99c0f9,
#bdb6ec,
#d7b3e3,
#efb3d5,
#f9bccc);
}
.shell {
width: 1200px;
height: 700px;
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 20px 30px 20px rgba(0, 0, 0, 0.25);
}
.images {
width: 500%;
height: 100%;
display: flex;
position: absolute;
left: 0;
transition: .2s;
}
.img {
width: 100%;
background-size: cover;
}
.img:nth-child(1) {
background-image: url("img/01.png");
}
.img:nth-child(2) {
background-image: url("img/02.png");
}
.img:nth-child(3) {
background-image: url("img/03.png");
}
.img:nth-child(4) {
background-image: url("img/04.png");
}
.img:nth-child(5) {
background-image: url("img/05.png");
}
.min {
display: flex;
justify-content: space-evenly;
position: absolute;
bottom: 40px;
width: 30%;
z-index: 999;
left: 50%;
transform: translateX(-50%);
}
.m {
width: 20px;
height: 20px;
cursor: pointer;
border-radius: 50%;
border: solid rgba(255, 255, 255, 0.5) 5px;
background-color: #fff;
}
.button {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: space-between;
user-select: none;
}
.button-left,
.button-right {
font-size: 50px;
background-color: rgba(160, 193, 255, 0.2);
padding: 0 20px;
cursor: pointer;
line-height: 700px;
color: #fff;
}
</style>
</head>
<body>
<div class="shell">
<ui class="images">
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
<li class="img"></li>
</ui>
<ui class="min">
<li class="m"></li>
<li class="m"></li>
<li class="m"></li>
<li class="m"></li>
<li class="m"></li>
</ui>
<div class="button">
<div class="button-left"><</div>
<div class="button-right">></div>
</div>
</div>
</body>
<script>
let left = document.querySelector(".button-left")
let right = document.querySelector(".button-right")
let m = document.querySelectorAll(".m")
let images = document.querySelector(".images")
// 我们先设置一个index用来计算和控制图片的位置，再设置一个time作为定时器
let index = 0
let time
// 在这里我们先创建一个position为复用函数，作用就是结合index来定义当前图片的位置的
function position() {
images.style.left = (index * -100) + "%"
}
// 然后我们创建一个复用函数add为加函数，如果当前图片的位置值index大于等于当前图片数量的话，
// 就说明超出了计算范围，所以得清零，如若不然index就加一
function add() {
if (index >= m.length - 1) {
index = 0
} else {
index++
}
}
// 反之desc为减函数，如果当前图片的位置值index小于1了，那么他的值就反弹到最顶端，也就是轮播图的最后面，如若不然index就减一
function desc() {
if (index < 1) {
index = m.length - 1
} else {
index--
}
}
// 创建一个timer来当做复用时间的函数，，每隔3秒钟index就加一，然后加入增加add函数和desc函数来判断一下，再加入定位函数
function timer() {
time = setInterval(() => {
index++
desc()
add()
position()
}, 3000)
}
// 接下来我们设置一下按钮，left为左边的按钮，因为点击时图片会反方向倒退，所以我们套入desc减函数进去，顺便定位一下
// 点击的时候我们必须先把定时器给停掉再重新执行一遍，不然会在你点击下一张图片时，定时器倒计时一到也跟着生效，这样子就会连跳两张图片了
left.addEventListener("click", () => {
desc()
position()
clearInterval(time)
timer()
})
// 右边的按钮和左边也是差不多
right.addEventListener("click", () => {
add()
position()
clearInterval(time)
timer()
})
// 在弄好左右两个按钮的时候，我们还需要生效下面的小图片按钮，
// 首先我们先遍历一遍，然后获取当前点击的那个小图片按钮的值并赋值给index，这样子就可以随之跳转
for (let i = 0; i < m.length; i++) {
m[i].addEventListener("click", () => {
index = i;
position();
clearInterval(time)
timer()
})
}
// 最后的最后我们将定时器开起来，这样子图片就可以自动轮播啦
timer()
</script>
</html>
请登录后发表评论
注册
社交账号登录
停留在世界边缘，与之惜别