<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0; /*规定总边框外边距为0 */
}
.box{
width: 1000px; /* 写个盒模型 */
height: 640px;
position: relative; /* 必须用relative */
}
.box-img{ /* 设置图片据.box的距离,absolute十分重要 */
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1.6s; /* 设置transition为1.6s秒是为了减少后面轮播时的误差 */
}
.box-img:nth-child(1){ /* nth-child(1)是给第一个图片赋值，让它显示 */
opacity: 1;
}
.box-left{ /* 设置 < 样式 */
position: absolute;
width: 35px;
height: 70px;
color: #ccc;
top: 50%;
border-radius: 0 5px 5px 0;
text-align: center;
line-height: 70px;
font-size: 27px;
margin-top: -35px;
}
.box-left:hover{ /* 用hover设置触碰时的背景 */
background-color: #00000050;
color: aliceblue;
cursor: pointer;
}
.box-right{ /* 设置 > 样式 */
position: absolute;
width: 35px;
height: 70px;
color:aliceblue ;
top: 50%;
margin-top: -35px;
border-radius: 0 5px 5px 0;
text-align: center;
line-height: 70px;
font-size: 27px;
right:0;
}
.box-right:hover{ /* 用hover设置触碰时的背景 */
background-color: #00000050;
color: aliceblue;
cursor: pointer;
}
.box-yuan>ul{ /* 设置下面圆圈的个式 */
padding: 0;
margin: 0;
list-style: none;
}
.box-yuan li{
width: 20px;
height: 20px;
border-radius: 100%;
background-color: aliceblue;
float: left;
margin-right: 10px;
html中轮播图的做法及源码
于 2024-06-01 16:22:14 首次发布
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
