废话不多说，上效果
主体结构，使用svg标签来构建主体，分别把左右按钮设置好，在使用svg设置时，构建两个svg画布，每个画布花九个圆，每个圆的圆心不变，圆的半径逐步增大，最外面的圆半径最大。两个画布的圆，在y轴上的坐标一致，x轴的坐标是根据图片左右轮播的的状态设置的，svg1是图片往左的波点图，svg2是图片往右的波点图。
<div class="container">
<div class="slider">
<div class="btn btn-left">
<i class="fa fa-angle-left"></i>
</div>
<div class="btn btn-right">
<i class="fa fa-angle-right"></i>
</div>
<svg class="svg1">
<!-- cx：圆点的x坐标 cy：圆点的y坐标 r：圆的半径 -->
<circle class="circle1" cx="34px" cy="50%" r="20" />
<circle class="circle2" cx="34px" cy="50%" r="100" />
<circle class="circle3" cx="34px" cy="50%" r="180" />
<circle class="circle4" cx="34px" cy="50%" r="260" />
<circle class="circle5" cx="34px" cy="50%" r="340" />
<circle class="circle6" cx="34px" cy="50%" r="420" />
<circle class="circle7" cx="34px" cy="50%" r="500" />
<circle class="circle8" cx="34px" cy="50%" r="580" />
<circle class="circle9" cx="34px" cy="50%" r="660" />
</svg>
<svg class="svg2">
<!-- cx：圆点的x坐标 cy：圆点的y坐标 r：圆的半径 -->
<circle class="circle1" cx="648px" cy="50%" r="20" />
<circle class="circle2" cx="648px" cy="50%" r="100" />
<circle class="circle3" cx="648px" cy="50%" r="180" />
<circle class="circle4" cx="648px" cy="50%" r="260" />
<circle class="circle5" cx="648px" cy="50%" r="340" />
<circle class="circle6" cx="648px" cy="50%" r="420" />
<circle class="circle7" cx="648px" cy="50%" r="500" />
<circle class="circle8" cx="648px" cy="50%" r="580" />
<circle class="circle9" cx="648px" cy="50%" r="660" />
</svg>
<!-- 设置图片 -->
<div class="slide slide1 active"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>css部分
给body设置样式，大小为百分百，在使用flex布局。给包裹住整体的div设置宽高，图片在这个区域显示。再给图片设置样式，給图片绝对定位让其显示在可是窗口区域，然后再给按钮设置好样式，颜色风格统一即可。
body {
/* 100%窗口宽高 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 渐变背景 */
background: linear-gradient(to top, #c1dfc4, #deecdd);
}
.container {
width: 681px;
height: 384px;
/* 阴影 */
box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);
/* 相对定位 */
position: relative;
/* 溢出隐藏 */
overflow: hidden;
}
.slider {
/* 绝对定位 */
position: absolute;
width: 400%;
height: 100%;
display: inline-flex;
overflow: hidden;
}
svg {
width: 681px;
height: 384px;
position: absolute;
/* 设置堆叠顺序 */
z-index: 3;
}
/* 左右按钮的统一样式 */
.btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: transparent;
border: 1px solid #949494;
color: #949494;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
/* 垂直居中 */
position: absolute;
top: 50%;
z-index: 4;
transform: translateY(-50%);
cursor: pointer;
/* 设置过渡效果 */
transition: 0.5s;
}
.btn:hover {
background-color: #c1dfc4;
}
.btn.btn-left {
left: 13px;
}
.btn.btn-right {
left: 628px;
}接下来设置svg画出来的若干个圆，在给每个圆取消填充，定义成绿色的线，并设置好过度样式。再给svg1和svg2每一个类名（class）相同的设置一样的过度样式，因为一个向左一个向右，是一个镜像结构。
/* 波浪圆圈 */
circle {
/* 取消填充 */
fill: none;
/* 定义一条浅绿色的线 */
stroke: #c1dfc4;
/* 线的厚度 */
stroke-width: 0;
/* 设置过渡动画时长 */
transition: 0.3s;
/* 设置过渡动画为线性动画 */
transition-timing-function: linear;
}
.svg1 .circle1,
.svg2 .circle1 {
transition-delay: 0.05s;
}
.svg1 .circle2,
.svg2 .circle2 {
transition-delay: 0.1s;
}
.svg1 .circle3,
.svg2 .circle3 {
transition-delay: 0.15s;
}
.svg1 .circle4,
.svg2 .circle4 {
transition-delay: 0.2s;
}
.svg1 .circle5,
.svg2 .circle5 {
transition-delay: 0.25s;
}
.svg1 .circle6,
.svg2 .circle6 {
transition-delay: 0.3s;
}
.svg1 .circle7,
.svg2 .circle7 {
transition-delay: 0.35s;
}
.svg1 .circle8,
.svg2 .circle8 {
transition-delay: 0.4s;
}
.svg1 .circle9,
.svg2 .circle9 {
transition-delay: 0.45s;
}图片样式代码如下，只需注意点击图片加上放大样式即可
/* 焦点图的统一样式 */
.slide {
position: absolute;
background-position: center;
background-size: cover;
width: 25%;
height: 100%;
z-index: 1;
transition: 1.4s;
}
/* 分别设置焦点图 */
.slide1 {
background-image: url('./img/1.jpg');
}
.slide2 {
background-image: url('./img/2.jpg');
}
.slide3 {
background-image: url('./img/3.jpg');
}
.slide4 {
background-image: url('./img/1.jpg');
}
/* 切换时图片放大 */
.scale {
transform: scale(1.3);
}
/* 设置当前图的堆叠顺序 */
.active {
z-index: 2;
}
/* 设置波浪圆圈的厚度 */
.streak {
stroke-width: 82px;
}js部分，具体看代码的注释，每个功能都完善。
<script>
var left = document.querySelector('.btn-left'), //左按钮
right = document.querySelector('.btn-right'); //右按钮
// 定义变量
var curpage = 1, //当前图下标
sliding = false, //防止多次切换
click = true, //防止多次点击
svg = true; //区分svg1和svg2
// 上一张
function prev() {
if (click) {
//当下标为4时，下标重新赋值为1
if (curpage == 4)
curpage = 1;
sliding = true;
curpage--;
svg = true;
//开关关闭
click = false;
for (i = 1; i <= 4; i++) {
//给获取到的图片加上放大功能
var a = document.querySelector('.slide' + i);
a.classList.add('scale');
}
//延迟200毫秒播放
setTimeout(function() {
change();
}, 200);
//延迟1400毫秒清楚放大功能
setTimeout(function() {
for (i = 1; i <= 4; i++) {
var a = document.querySelector('.slide' + i);
a.classList.remove('scale');
}
}, 1400);
}
}
// 下一张
function next() {
if (click) {
if (curpage == 4) curpage = 0;
sliding = true;
curpage++;
svg = false;
click = false;
for (i = 1; i <= 4; i++) {
var a = document.querySelector('.slide' + i);
a.classList.add('scale');
}
setTimeout(function() {
change();
}, 200);
setTimeout(function() {
for (i = 1; i <= 4; i++) {
var a = document.querySelector('.slide' + i);
a.classList.remove('scale');
}
}, 1400);
}
}
// 切换焦点图
function change() {
if (sliding) {
sliding = false;
if (svg) {
for (j = 1; j <= 9; j++) {
//给获取出来的圆圈加厚，形成波浪
var a = document.querySelector('.svg1 .circle' + j);
a.classList.add('streak');
}
} else {
for (j = 1; j <= 9; j++) {
var a = document.querySelector('.svg2 .circle' + j);
a.classList.add('streak');
}
}
setTimeout(function() {
for (i = 1; i <= 4; i++) {
if (i == curpage) {
//让获取去来的图片显示
var a = document.querySelector('.slide' + i);
a.classList.add('active');
} else {
var a = document.querySelector('.slide' + i);
a.classList.remove('active');
}
}
sliding = true;
}, 600);
setTimeout(function() {
click = true;
}, 1700);
setTimeout(function() {
if (svg) {
for (j = 1; j <= 9; j++) {
var a = document.querySelector('.svg1 .circle' + j);
a.classList.remove('streak');
}
} else {
for (j = 1; j <= 9; j++) {
var a = document.querySelector('.svg2 .circle' + j);
a.classList.remove('streak');
}
sliding = true;
}
}, 850);
setTimeout(function() {
click = true;
}, 1700);
}
}
// 绑定左按钮的点击事件
left.addEventListener('click', prev);
// 绑定右按钮的点击事件
right.addEventListener('click', next);
// 绑定键盘左右键事件
document.addEventListener('keydown', function (e) {
if (e.keyCode == 37) {
prev();
} else if (e.keyCode == 39) {
next();
}
})
</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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 100%窗口宽高 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 渐变背景 */
background: linear-gradient(to top, #c1dfc4, #deecdd);
}
.container {
width: 681px;
height: 384px;
/* 阴影 */
box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);
/* 相对定位 */
position: relative;
/* 溢出隐藏 */
overflow: hidden;
}
.slider {
/* 绝对定位 */
position: absolute;
width: 400%;
height: 100%;
display: inline-flex;
overflow: hidden;
}
svg {
width: 681px;
height: 384px;
position: absolute;
/* 设置堆叠顺序 */
z-index: 3;
}
/* 左右按钮的统一样式 */
.btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: transparent;
border: 1px solid #949494;
color: #949494;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
/* 垂直居中 */
position: absolute;
top: 50%;
z-index: 4;
transform: translateY(-50%);
cursor: pointer;
/* 设置过渡效果 */
transition: 0.5s;
}
.btn:hover {
background-color: #c1dfc4;
}
.btn.btn-left {
left: 13px;
}
.btn.btn-right {
left: 628px;
}
/* 波浪圆圈 */
circle {
/* 取消填充 */
fill: none;
/* 定义一条浅绿色的线 */
stroke: #c1dfc4;
/* 线的厚度 */
stroke-width: 0;
/* 设置过渡动画时长 */
transition: 0.3s;
/* 设置过渡动画为线性动画 */
transition-timing-function: linear;
}
.svg1 .circle1,
.svg2 .circle1 {
transition-delay: 0.05s;
}
.svg1 .circle2,
.svg2 .circle2 {
transition-delay: 0.1s;
}
.svg1 .circle3,
.svg2 .circle3 {
transition-delay: 0.15s;
}
.svg1 .circle4,
.svg2 .circle4 {
transition-delay: 0.2s;
}
.svg1 .circle5,
.svg2 .circle5 {
transition-delay: 0.25s;
}
.svg1 .circle6,
.svg2 .circle6 {
transition-delay: 0.3s;
}
.svg1 .circle7,
.svg2 .circle7 {
transition-delay: 0.35s;
}
.svg1 .circle8,
.svg2 .circle8 {
transition-delay: 0.4s;
}
.svg1 .circle9,
.svg2 .circle9 {
transition-delay: 0.45s;
}
/* 焦点图的统一样式 */
.slide {
position: absolute;
background-position: center;
background-size: cover;
width: 25%;
height: 100%;
z-index: 1;
transition: 1.4s;
}
/* 分别设置焦点图 */
.slide1 {
background-image: url('./img/1.jpg');
}
.slide2 {
background-image: url('./img/2.jpg');
}
.slide3 {
background-image: url('./img/3.jpg');
}
.slide4 {
background-image: url('./img/2.jpg');
}
/* 切换时图片放大 */
.scale {
transform: scale(1.3);
}
/* 设置当前图的堆叠顺序 */
.active {
z-index: 2;
}
/* 设置波浪圆圈的厚度 */
.streak {
stroke-width: 82px;
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<div class="btn btn-left">
<i class="fa fa-angle-left"><</i>
</div>
<div class="btn btn-right">
<i class="fa fa-angle-right">></i>
</div>
<svg class="svg1">
<!-- cx：圆点的x坐标 cy：圆点的y坐标 r：圆的半径 -->
<circle class="circle1" cx="34px" cy="50%" r="20" />
<circle class="circle2" cx="34px" cy="50%" r="100" />
<circle class="circle3" cx="34px" cy="50%" r="180" />
<circle class="circle4" cx="34px" cy="50%" r="260" />
<circle class="circle5" cx="34px" cy="50%" r="340" />
<circle class="circle6" cx="34px" cy="50%" r="420" />
<circle class="circle7" cx="34px" cy="50%" r="500" />
<circle class="circle8" cx="34px" cy="50%" r="580" />
<circle class="circle9" cx="34px" cy="50%" r="660" />
</svg>
<svg class="svg2">
<!-- cx：圆点的x坐标 cy：圆点的y坐标 r：圆的半径 -->
<circle class="circle1" cx="648px" cy="50%" r="20" />
<circle class="circle2" cx="648px" cy="50%" r="100" />
<circle class="circle3" cx="648px" cy="50%" r="180" />
<circle class="circle4" cx="648px" cy="50%" r="260" />
<circle class="circle5" cx="648px" cy="50%" r="340" />
<circle class="circle6" cx="648px" cy="50%" r="420" />
<circle class="circle7" cx="648px" cy="50%" r="500" />
<circle class="circle8" cx="648px" cy="50%" r="580" />
<circle class="circle9" cx="648px" cy="50%" r="660" />
</svg>
<!-- 设置图片 -->
<div class="slide slide1 active"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script>
var left = document.querySelector('.btn-left'), //左按钮
right = document.querySelector('.btn-right'); //右按钮
// 定义变量
var curpage = 1, //当前图下标
sliding = false, //防止多次切换
click = true, //防止多次点击
svg = true; //区分svg1和svg2
// 上一张
function prev() {
if (click) {
//当下标为4时，下标重新赋值为1
if (curpage == 4)
curpage = 1;
sliding = true;
curpage--;
svg = true;
//开关关闭
click = false;
for (i = 1; i <= 4; i++) {
//给获取到的图片加上放大功能
var a = document.querySelector('.slide' + i);
a.classList.add('scale');
}
//延迟200毫秒播放
setTimeout(function() {
change();
}, 200);
//延迟1400毫秒清楚放大功能
setTimeout(function() {
for (i = 1; i <= 4; i++) {
var a = document.querySelector('.slide' + i);
a.classList.remove('scale');
}
}, 1400);
}
}
// 下一张
function next() {
if (click) {
if (curpage == 4) curpage = 0;
sliding = true;
curpage++;
svg = false;
click = false;
for (i = 1; i <= 4; i++) {
var a = document.querySelector('.slide' + i);
a.classList.add('scale');
}
setTimeout(function() {
change();
}, 200);
setTimeout(function() {
for (i = 1; i <= 4; i++) {
var a = document.querySelector('.slide' + i);
a.classList.remove('scale');
}
}, 1400);
}
}
// 切换焦点图
function change() {
if (sliding) {
sliding = false;
if (svg) {
for (j = 1; j <= 9; j++) {
//给获取出来的圆圈加厚，形成波浪
var a = document.querySelector('.svg1 .circle' + j);
a.classList.add('streak');
}
} else {
for (j = 1; j <= 9; j++) {
var a = document.querySelector('.svg2 .circle' + j);
a.classList.add('streak');
}
}
setTimeout(function() {
for (i = 1; i <= 4; i++) {
if (i == curpage) {
//让获取去来的图片显示
var a = document.querySelector('.slide' + i);
a.classList.add('active');
} else {
var a = document.querySelector('.slide' + i);
a.classList.remove('active');
}
}
sliding = true;
}, 600);
setTimeout(function() {
click = true;
}, 1700);
setTimeout(function() {
if (svg) {
for (j = 1; j <= 9; j++) {
var a = document.querySelector('.svg1 .circle' + j);
a.classList.remove('streak');
}
} else {
for (j = 1; j <= 9; j++) {
var a = document.querySelector('.svg2 .circle' + j);
a.classList.remove('streak');
}
sliding = true;
}
}, 850);
setTimeout(function() {
click = true;
}, 1700);
}
}
// 绑定左按钮的点击事件
left.addEventListener('click', prev);
// 绑定右按钮的点击事件
right.addEventListener('click', next);
// 绑定键盘左右键事件
document.addEventListener('keydown', function (e) {
if (e.keyCode == 37) {
prev();
} else if (e.keyCode == 39) {
next();
}
})
</script>
</body>
</html>
2514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
