旋转木马轮播图 html+css+js
先看效果（完整代码在底部）：能轮播，点击按钮能切图。鼠标位于图片或按钮上停止轮播。 实现（可跟着一步一步实现）：
·
先看效果（完整代码在底部）：
旋转木马轮播图源码与制作过程 html+css+js
能轮播，点击按钮能切图。鼠标位于图片或按钮上停止轮播。
实现（可跟着一步一步实现）：
1. 定义标签（video是背景视频，.but1与.but2是左右两个按钮，main与.haha是底层盒子，.box就是旋转的8张图）：
<video src="video/3.mp4" autoplay loop muted></video>
<main id="main">
<div class="but1"></div>
<div class="but2"></div>
<div class="haha">
<div class="box" style="--d: 0;"> <img src="img/1.jpg"> </div>
<div class="box" style="--d: 1;"> <img src="img/25.jpg"> </div>
<div class="box" style="--d: 2;"> <img src="img/3.jpg"> </div>
<div class="box" style="--d: 3;"> <img src="img/52.jpg"> </div>
<div class="box" style="--d: 4;"> <img src="img/6.jpg"> </div>
<div class="box" style="--d: 5;"> <img src="img/snow.jpg"> </div>
<div class="box" style="--d: 6;"> <img src="img/8.jpg"> </div>
<div class="box" style="--d: 7;"> <img src="img/sea.jpg"> </div>
</div>
</main>
- -d是var函数的使用，var函数的可以去看这个文章的开头部分
2. 定义底层盒子基本样式：
main{
position: relative;
width: 220px;
height: 130px;
perspective: 800px;
}
.haha{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s;
}
position: relative;相对定位。
perspective: 800px;改变3D元素是怎样查看透视图。
transform-style: preserve-3d;子元素将保留其 3D 位置。
transition: all 1s; 过渡，后面切图时的时间。
3. 定义按钮基本样式：
.but1,.but2{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
font-size: 30px;
color: white;
opacity: 0.8;
line-height: 50px;
text-align: center;
border-radius: 50%;
cursor: pointer;
user-select: none;
}
.but2{
left: -320px;
}
.but1{
right: -320px;
}
transform：translateY：偏移。
opacity：0.8；透明度。
text-align: center; 文本居中。
cursor: pointer; 鼠标外观样式。
user-select: none; 文本不可选。
4. 经过与点击按钮样式变化：
.but1:hover,.but2:hover{
box-shadow: inset 0 0 5px rgb(18, 208, 221);
opacity: 1;
}
.but1:active,.but2:active{
/* background-color: rgb(22, 163, 81); */
box-shadow: inset 0 0 5px rgb(18, 208, 221),
inset 0 0 10px rgb(18, 208, 221),
inset 0 0 15px rgb(18, 208, 221);
}
box-shadow：阴影。
opacity: 1; 透明度。
5. 图片的基本样式：
.box{
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(calc(var(--d) * 45deg)) translateZ(295px);
}
.box img{
width: 100%;
height: 100%;
}
transform: rotateY(calc(var(–d) * 45deg)) translateZ(295px); 每张图旋转与偏移相应的位置得到旋转木马的立体效果。可自己调节~
6. 开始js部分，获取元素与定义变量：
var haha = document.querySelector(".haha");
var but1 = document.querySelector(".but1");
var but2 = document.querySelector(".but2");
/* 旋转角度 */
var zhuan = 0;
/* 设置轮播定时器 */
var lunbo = setInterval(fn,3000);
7. 点击向左按钮事件，点一次转 -45deg：
but1.addEventListener('click',function(){
zhuan = zhuan - 45;
haha.style.cssText = ` transform: rotateY(${zhuan}deg); `;
})
8. 点击向右按钮事件，点一次转 45deg：
but2.addEventListener('click',fn);
function fn(){
zhuan = zhuan + 45;
haha.style.cssText = ` transform: rotateY(${zhuan}deg); `;
}
9. 鼠标经过按钮与图片时停止轮播定时器，离开图片与按钮开始轮播定时器（简单粗暴）：
but1.addEventListener('mouseover',function(){
clearInterval(lunbo);
});
but1.addEventListener('mouseout',function(){
lunbo = setInterval(fn,3000);
});
but2.addEventListener('mouseover',function(){
clearInterval(lunbo);
});
but2.addEventListener('mouseout',function(){
lunbo = setInterval(fn,3000);
});
haha.addEventListener('mouseover',function(){
clearInterval(lunbo);
});
haha.addEventListener('mouseout',function(){
lunbo = setInterval(fn,3000);
});
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?wr5es');
src: url('fonts/icomoon.eot?wr5es#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?wr5es') format('truetype'),
url('fonts/icomoon.woff?wr5es') format('woff'),
url('fonts/icomoon.svg?wr5es#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
*{
font-family: 'icomoon';
margin: 0;
padding: 0;
box-sizing: border-box;
}
video{
position: fixed;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(7, 14, 34);
}
main{
position: relative;
width: 220px;
height: 130px;
perspective: 800px;
}
.haha{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s;
}
.but1,.but2{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
font-size: 30px;
color: white;
opacity: 0.8;
line-height: 50px;
text-align: center;
border-radius: 50%;
cursor: pointer;
user-select: none;
}
.but2{
left: -320px;
}
.but1{
right: -320px;
}
.but1:hover,.but2:hover{
box-shadow: inset 0 0 5px rgb(18, 208, 221);
opacity: 1;
}
.but1:active,.but2:active{
/* background-color: rgb(22, 163, 81); */
box-shadow: inset 0 0 5px rgb(18, 208, 221),
inset 0 0 10px rgb(18, 208, 221),
inset 0 0 15px rgb(18, 208, 221);
}
.box{
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(calc(var(--d) * 45deg)) translateZ(295px);
}
.box img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<video src="video/3.mp4" autoplay loop muted></video>
<main id="main">
<div class="but1"></div>
<div class="but2"></div>
<div class="haha">
<div class="box" style="--d: 0;"> <img src="img/1.jpg"> </div>
<div class="box" style="--d: 1;"> <img src="img/25.jpg"> </div>
<div class="box" style="--d: 2;"> <img src="img/3.jpg"> </div>
<div class="box" style="--d: 3;"> <img src="img/52.jpg"> </div>
<div class="box" style="--d: 4;"> <img src="img/6.jpg"> </div>
<div class="box" style="--d: 5;"> <img src="img/snow.jpg"> </div>
<div class="box" style="--d: 6;"> <img src="img/8.jpg"> </div>
<div class="box" style="--d: 7;"> <img src="img/sea.jpg"> </div>
</div>
</main>
<script>
var haha = document.querySelector(".haha");
var but1 = document.querySelector(".but1");
var but2 = document.querySelector(".but2");
/* 旋转角度 */
var zhuan = 0;
/* 设置轮播定时器 */
var lunbo = setInterval(fn,3000);
but1.addEventListener('click',function(){
zhuan = zhuan - 45;
haha.style.cssText = ` transform: rotateY(${zhuan}deg); `;
})
but1.addEventListener('mouseover',function(){
clearInterval(lunbo);
});
but1.addEventListener('mouseout',function(){
lunbo = setInterval(fn,3000);
});
but2.addEventListener('click',fn);
but2.addEventListener('mouseover',function(){
clearInterval(lunbo);
});
but2.addEventListener('mouseout',function(){
lunbo = setInterval(fn,3000);
});
function fn(){
zhuan = zhuan + 45;
haha.style.cssText = ` transform: rotateY(${zhuan}deg); `;
}
haha.addEventListener('mouseover',function(){
clearInterval(lunbo);
});
haha.addEventListener('mouseout',function(){
lunbo = setInterval(fn,3000);
});
</script>
</body>
</html>
总结：
热烈宣布（敲锣打鼓，手舞足蹈），我的B站账号地址：https://space.bilibili.com/176586698
~泪目( Ĭ ^ Ĭ )~
其它文章：
炫彩流光文字 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等
夏天的风，我永远记得。
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
31
0- 0
已为社区贡献1条内容
所有评论(0)