AI 助理
备案控制台
开发者社区 安全 文章 正文

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

2024-06-26 51
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 旋转木马轮播图 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>

2. 定义底层盒子基本样式：

main{
            position: relative;
            width: 220px;
            height: 130px;
            perspective: 800px;
        }
        .haha{
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-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;
        }

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);
        }

5. 图片的基本样式：

 .box{
            position: absolute;
            width: 100%;
            height: 100%;
            transform: rotateY(calc(var(--d) * 45deg)) translateZ(295px); 
        }
        .box img{
            width: 100%;
            height: 100%;                    
        }

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);
but1.addEventListener('click',function(){
            zhuan = zhuan - 45;
            haha.style.cssText = ` transform: rotateY(${zhuan}deg); `;
        })
but2.addEventListener('click',fn);
 function fn(){
            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('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);
        });

7.在你的页面使用该页面

<div>
    <iframe src="3d照片栏.html" frameborder="0" scrolling="no" width="1600" height="400" ></iframe>
</div>

完整代码：

<!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:   #87CEFA;
        }
        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="image/yeyu1.jpg"> </div>
        <div  class="box" style="--d: 1;"> <img src="image/yeyu2.jpg"> </div> 
        <div  class="box" style="--d: 2;"> <img src="image/yeyu3.jpg"> </div>
        <div  class="box" style="--d: 3;"> <img src="image/yeyu4.jpg"> </div>
        <div  class="box" style="--d: 4;"> <img src="image/yeyu6.jpg"> </div>
        <div  class="box" style="--d: 5;"> <img src="image/yeyu7.jpg"> </div>
        <div  class="box" style="--d: 6;"> <img src="image/yeyu8.jpg"> </div>
        <div  class="box" style="--d: 7;"> <img src="image/yeyu9.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>
文章标签：
安全
JavaScript
关键词：
HTML CSS
HTML css js
HTML CSS JavaScript
CSS js
HTML js
写代码的大学生
目录
相关文章
光明顶阳顶天
|
28天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
30 1
温轻舟
|
6天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
35 1
蓝易云
|
11天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
22 3
疯狂的猿
|
14天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果，可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素，向下拖拽可实现删除效果，简单实用，欢迎下载
疯狂的猿
27 4
疯狂的猿
|
13天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码，在公路上开车网页小游戏源代码。
疯狂的猿
39 0
html5+three.js公路开车小游戏源码
疯狂的猿
|
22天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
73 6
神明木佑
|
1月前
|
前端开发
js-基础轮播图制作
js-基础轮播图制作
神明木佑
24 7
代码bug生产队
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶：从HTML到React.js
【10月更文挑战第9天】前端开发进阶：从HTML到React.js
代码bug生产队
36 1
神明木佑
|
1月前
|
JavaScript 前端开发
JavaScript 与 HTML 的结合
JavaScript 与 HTML 的结合
神明木佑
15 0
萤火虫的小尾巴
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
萤火虫的小尾巴
100 0