旋转木马轮播图 html+css+js

心已赠人 2022-11-12 11:53 372阅读 0赞

## 先看效果（完整代码在底部）： ##

旋转木马轮播图源码与制作过程 html+css+js

能轮播，点击按钮能切图。鼠标位于图片或按钮上停止轮播。

## 实现（可跟着一步一步实现）： ##

**1. 定义标签（video是背景视频，.but1与.but2是左右两个按钮，main与.haha是底层盒子，.box就是旋转的8张图）：**

[\- -d是var函数的使用，var函数的可以去看这个文章的开头部分][- -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站账号][B]地址：**https://space.bilibili.com/176586698**

~泪目( Ĭ ^ Ĭ )~

**其它文章：**  
[炫彩流光文字 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 1]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 2]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 3]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

**夏天的风，我永远记得。**

[- -d_var_var]: https://blog.csdn.net/luo1831251387/article/details/113749113
[B]: https://space.bilibili.com/176586698
[html_css]: https://blog.csdn.net/luo1831251387/article/details/113838748
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/43206a3bfcd6433cad9ed4bef5891a7d.png