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

最新推荐文章于 2024-02-21 15:42:27 发布
最新推荐文章于 2024-02-21 15:42:27 发布
阅读量5.9k 收藏 110
点赞数 29
分类专栏： 前端大杂烩 js 创意效果大全 文章标签： css js html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo1831251387/article/details/115150938
版权

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

旋转木马轮播图源码与制作过程 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总结笔记
…等
在这里插入图片描述

夏天的风，我永远记得。

北极光之夜。
关注
  • 29
    点赞
  • 踩
  • 110
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 16
    评论
专栏目录
JS实现旋转木马式图片轮播效果
11-27
本文实例为大家分享了js图片轮播的具体代码，供大家参考，具体内容如下 主要html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/css.css"> [removed][removed] </head> <body> <div class="w-wrap" id
【JS实例】原生JS轮播图之旋转木马（自动、手动切换）
qq_40060547的博客
02-28 1792
前言 轮播图是开发网站、app不可缺少的页面结构。轮播图有很多种，3D模式，碎片化等。这里简单写一种旋转木马形式的，如下面图： 实现原理： 左右两侧效果用的是transform的rotateY属性，使图片看起开具有3D效果，分别定义三种状态的样式，然后每次调换图片的样式 源码（主要代码附带解释）： css： *{ margin: 0; ...
实现一个旋转木马样式的轮播
最新发布
tzz_1122的博客
02-21 278
使用了vue-carousel-3d插件。
原生js实现旋转木马轮播图效果
12-09
话不多说，请看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} #demo{width:1200px;margin:100px auto 0;} #innerht{width:1200px;height:500px;position:relative;} ul li{position:absolute;top:0;left:
图片叠加旋转木马轮播切换效果.zip
10-27
前端页面html，css，js轮播图效果，图片叠加旋转木马轮播切换效果。
移动端 旋转木马轮播图 可触摸滑动 (1).zip
03-26
旋转木马轮播图
轮播图(旋转木马)
itcast_cs的博客
02-20 4289
​ 作为在市面上各个应用最最常见的功能-轮播图，想必大家并不陌生了，在电商相关的网站以及app中是最常见的，随便打开一个电商类的，在首页都能看到轮播图效果。既然是这么常见的效果，有很多人都想着把这个功能做得比较炫丽，比较好看，别人一眼看去觉得高大上，下面呢，我为大家讲解一下 旋转木马轮播图的效果是如何实现；下面我们先来看一下效果： 案例效果 所谓外行看热闹，内行看门道，接触过前端开发的小伙伴 应...
通过swiper插件制作旋转木马轮播图
qq_49900295的博客
03-26 5652
实现效果： 1.swiper插件准备 我们旋转木马轮播图的效果可以通过swiper插件轻松搞定 这种效果是不是和我们要做的很像呀，我们只要把它引入我们的案例就ok了 在swiper官网的获取swiper下下载swiper-5的压缩包然后解压 然后进入js文件夹，复制里面的swiper.min.js文件 然后粘贴到我们的项目文件夹中，同理再进入css文件夹，将里面的swiper.min.css复制到项目文件夹中 回到我们swiper插件的页面，单击这里的新窗口打开： 然后右击点击查看网页源代码：
html简单旋转木马
qq_45879198的博客
08-17 2224
文章目录前言一、旋转木马展示二、旋转木马源代码三、该项目所需文件 前言 利用3d动画写了一个旋转木马 提示：以下是本篇文章正文内容，下面案例可供参考 一、旋转木马展示 二、旋转木马源代码 代码如下（示例）： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
旋转木马图片效果图，轮播图
Chad97的博客
09-01 1918
旋转木马图片效果图，轮播图 老规矩先上一张示例图： HTML代码： &lt;div class="wrap" id="wrap"&gt; &lt;div class="slide" id="slide"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;
极其绚丽的图片轮播器，旋转木马（html5+css+js）制作
01-06
极其绚丽的图片轮播器，旋转木马（html5+css+js）制作多种动画效果，直接打包成jquery包，下载直接使用
旋转木马轮播图特效.rar
02-07
不错的JS特效效果，适合用于学习、练手以及自己的相关项目中
div旋转轮播html,CSS3 卡片3D旋转轮播（旋转木马）
weixin_28871731的博客
06-19 410
CSS语言：CSSSCSS确定.icon-cards {position: absolute;top: 50%;left: 50%;width: 190px;height: 210px;-webkit-perspective: 800px;perspective: 800px;-webkit-transform: translate(-50%, -50%);-ms-transform: trans...
Html5添加非常实用的可自动轮播的旋转木马插件教程
weixin_33953249的博客
01-11 149
2019独角兽企业重金招聘Python工程师标准>>> ...
旋转木马代码
DTechnology的博客
04-17 1432
html&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;旋转木马轮播图&lt;/title&gt; &lt;link rel="stylesheet" href="css/c
【JavaWeb】CSS实现旋转木马轮播图
TechnicalXiaobai的博客
07-16 1197
轮播图、CSS、前端
轮播图——旋转木马（Jquery）
weixin_41897680的博客
02-13 3576
使用 该jQuery旋转木马插件需要引入jQuery，carousel.js、carousel.css文件 HTML <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I...
React中用Swiper做的旋转木马轮播
sulao666的博客
05-21 787
const imgList = useMemo( () => new Array(26)//共26张图片 .fill('') .map((item, index: number) => require(`../../assets/image/us/author/${index + 1}.jpg`)), //每个图片名字就是index值+1 [], ) <Swiper watchSlidesPr..
html旋转木马轮播图
07-28
旋转木马轮播图是一种常见的网页设计效果，可以通过HTML、CSS和JavaScript来实现。根据提供的引用内容，可以看出旋转木马轮播图的实现主要是通过点击向左和向右按钮来改变旋转角度，从而实现图片的切换效果。 具体实现步骤如下： 1. 首先，在HTML中创建一个包含图片的容器，可以使用`<div>`元素，并为其设置一个唯一的ID，比如`haha`。 2. 使用CSS来设置容器的样式，包括宽度、高度、位置等，以及设置容器内图片的样式，比如设置宽度、高度、边框等。 3. 在JavaScript中，通过获取向左和向右按钮的元素，并为其添加点击事件监听器。 4. 在点击向左按钮事件的监听器中，通过改变旋转角度的值来实现向左旋转的效果，可以使用`transform`属性和`rotateY()`函数来实现。 5. 在点击向右按钮事件的监听器中，通过改变旋转角度的值来实现向右旋转的效果，同样使用`transform`属性和`rotateY()`函数。 6. 最后，通过修改容器的样式，将旋转角度应用到容器上，从而实现图片的旋转效果。 需要注意的是，具体的实现可能还需要根据实际需求进行调整和优化，比如添加过渡效果、自动播放等。 综上所述，通过点击向左和向右按钮来改变旋转角度，可以实现HTML旋转木马轮播图效果。 #### 引用[.reference_title] - *1* *2* *3* [旋转木马轮播图 html+css+js](https://blog.csdn.net/luo1831251387/article/details/115150938)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北极光之夜。

谢谢~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值