3d旋转轮播图

最新推荐文章于 2024-07-25 11:52:30 发布
最新推荐文章于 2024-07-25 11:52:30 发布
阅读量1.7k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Frost666/article/details/81512648
版权 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style id="css">
      *{ margin: 0;padding: 0}
      body{ background-color:#292929}
      .pic{
         height: 360px;
         transform: scaleX(1.5) scaleY(1.5);
      }
      .wrap{
         width: 800px;
         height: 360px;
         margin:200px auto;
         perspective: 800px;
         cursor: pointer;

      }
      .pic li{
         list-style-type: none;
         height:360px;
         width: 200px;
         float: left;
         position: relative;
         transform-style: preserve-3d;
         transform:translateZ(-180px)
      }
      .pic li div{
         height:360px;
         position: absolute;
      }
      .pic li div:nth-child(1){
         top:-360px;
         transform-origin:bottom;
         transform:translateZ(180px) rotateX(90deg);
         background: url("img/1.jpg");
      }
      .pic li div:nth-child(2){
         top:360px;
         transform-origin:top;
         transform:translateZ(180px) rotateX(-90deg);
         background: url("img/2.jpg");
      }
      .pic li div:nth-child(3){
         transform:translateZ(180px);
         background: url("img/3.jpg");
      }
      .pic li div:nth-child(4){
         transform:translateZ(-180px) rotateX(180deg);
         background: url("img/4.jpg");
      }
      /*4个选项按钮*/
      .but li{
         list-style-type: none;
         width: 20px;
         height: 20px;
         background-color: #000;
         border-radius: 10px;
         color:#fff;
         font-size: 12px;
         text-align: center;
         line-height: 20px;
         float: left;
         margin-left: 5px;
         cursor: pointer;
         box-shadow: -1px 3px 6px white
      }
      .but{
         position: absolute;
         bottom:10px;
         right: 10px
      }
      .but .active,.but li:hover{
         background-color: red;
      }
   </style>
</head>
<body>
   <div class="wrap">
      <ul class="pic">
      </ul>

      <!--4个按钮-->
      <ul class="but">
         <li class="active">1</li>
         <li >2</li>
         <li>3</li>
         <li >4</li>
      </ul>

   </div>
   <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
   <script>
   // 原理，先设想一个立方体，但是观看本轮播，发现不需要左右两个面，所以去掉左右两个面，留下前后上下4个面。用4个div表示。因为整体不涉及到左右两个面，所以没有左右面。
   // 每一张图片都可以切割成x个立方体，每一个立方体用一个li表示，然后这x个li的4个div的背景图片动态设置。
   // 同一个li里面所有div背景图片相同，通过background-position和js动态设置偏移量。可以控制整个图片的背景不乱。
      var x=20;//此值可以更改，越大效果越明显，分成的越多。  建议不超过999.    大于一定图片可能不清晰。
      var pHTML="";
      // 分成多少块后每一块的宽度
      var ewid=800/x;

      var cHTML="";
      var zHTML="";
      var tHTML="";
      var z=0;
      for(var i=0;i<x;i++){
         // 图片动态添加4个面，上下，前后。  不需要左右面
         pHTML+="<li><div></div><div></div><div></div><div></div></li>";
         // 其实是给每一个div添加了一个背景，但是让背景只显示一小部分。通过position设置。-i*ewid是控制背景图片的左偏移量。
         cHTML+=".pic li:nth-child("+(i+1)+") div{background-position:"+(-i*ewid)+"px;background-size:800px 360px;}";
         // 控制每一个li里面div的运动时间。
         tHTML+=".pic li:nth-child("+(i+1)+"){transition: 1s "+0.5*(i/x)+"s}";
         // 控制显示层，防止背后和上下的图片显示到前面。
         if(i>x/2){z--;
            zHTML+=".pic li:nth-child("+(i+1)+"){z-index:"+z+";}"

         }

      }
      $('.pic').append(pHTML);
      $('#css').append(cHTML+zHTML+tHTML);
      $('.pic li').css('width',ewid);
      $('.pic li div').css('width',ewid);
   console.log($('.pic li div:nth-of-type(1)').css("width"));
      // 给下面的4个按钮添加点击事件
      $('.but li').click(function(){
         var a=$(this).index();
         var b=a*90+'deg';
         $(".pic li").css("transform","translateZ(-180px) rotateX("+b+")");
          $(this).addClass("active").siblings().removeClass();
      });
      //图片自动播放
   function fun1(){
      let i=$(".active").index();
      i++;
      if(i==4){
         i=0;
      }
      $(".pic li").css("transform","translateZ(-180px) rotateX("+90*i+"deg)");
      $('.but li').eq(i).addClass("active").siblings().removeClass();

   }
   var timer=setInterval(fun1,2000);
   $('.wrap').hover(
         function(){
            clearInterval(timer);
         },
         function(){
            timer=setInterval(fun1,2000);
         });
   </script>
</body>
</html>
瓜皮瓜皮
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
3D旋转轮播图
亚丝娜
12-27 439
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D&lt
3D旋转图片轮播特效
07-14
3D旋转图片轮播特效
HTML-网页-3D旋转相册-创意相册_网页旋转相册
最新发布
2301_82244122的博客
07-25 353
【代码】HTML-网页-3D旋转相册-创意相册_网页旋转相册。
jQuery3D旋转轮播图.zip
08-12
原生jQuery开发的3D旋转轮播图 技术要点：1)封装插件 2)调用插件 3)自动播放 原生jQuery开发的3D旋转轮播图 原生jQuery开发的3D旋转轮播图 原生jQuery开发的3D旋转轮播图
JavaScript特效3D可旋转轮播图
weixin_43898383的博客
07-24 849
3D轮播图特效 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="container
旋转式轮播图
qq_40181206的博客
04-10 2409
旋转式轮播图 旋转式轮播图 今天给出的是旋转式的轮播图，本实例主要考验对动画函数的封装使用，以及对数组的增删操作，通过json对象组成的数组为每个轮播图设定位置实现旋转式轮播图的效果具体代码如下 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title...
js+css3图片3D旋转轮播特效
06-09
"js+css3图片3D旋转轮播特效"就是一个结合JavaScript与CSS3技术，为网站焦点图提供立体旋转切换效果的实例。这种特效可以使得网站的图像展示更加生动，增加用户的交互体验。 首先，我们来了解一下CSS3。CSS3是层叠...
jquery实现3D旋转轮播图片代码.rar
06-23
jquery实现3D旋转轮播图片代码.rar jquery实现3D旋转轮播图片代码.rar jquery实现3D旋转轮播图片代码.rar jquery实现3D旋转轮播图片代码.rar jquery实现3D旋转轮播图片代码.rar jquery实现3D旋转轮播图片代码.rar ...
jquery 3d旋转轮播图效果
12-10
在这个3D旋转轮播图中，CSS3的rotateY()函数被用来创建3D旋转效果，当用户点击或滑动时，图片会沿着Y轴旋转，呈现出立体的翻转感。 项目中的文件结构如下： 1. **index.html**：这是项目的主HTML文件，包含了轮播...
jquery实现3D旋转轮播图片代码.zip
07-11
【标题】：“jQuery实现3D旋转轮播图片代码”是一个基于JavaScript库jQuery的动态图片展示技术，它通过3D效果为网站添加引人入胜的视觉体验。这种轮播图通常用于网页设计中，以展示产品、服务或者任何需要动态展示的...
旋转轮播图
Efficiency9的博客
06-24 801
最近觉得手生，看到优酷官网的轮播图，所以决定写个旋转轮播图效果。 与之前自己写的轮播图最大不同的是： 之前我做轮播图有两种方式 通过设置ul和li，把li排成一行，计算宽度，达到轮播图左右切换的效果 把li摞在一起，设置渐变隐藏或者显示，类似慕课网官网效果 旋转轮播图实现的原理又给我提供了一种新的思路，通过在切换中改变标签的内容和位置来达到切换效果 实例代码： html <div clas
CSS3图片3D旋转轮播特效.zip
07-11
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js css3图片3D旋转轮播特效</title> <link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" /> <link rel="stylesheet" type="text/css" href="css/demo.css?3.1.64"> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body>[removed][removed] <div class="htmleaf-container"> <h1>3D Rotating Carousel Examples</h1> <h2>Three images</h2> <div class="carousel"> <figure> <img > <img > <img > </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Four images</h2> <div class="carousel"> <figure> <img > <img > <img > <img > </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> js css3实现的多个图片3D旋转轮播特效，很好看的网站焦点图立体旋转切换代码。
多图3D旋转图片轮播.zip
07-04
多图3D旋转图片轮播是一款可以多图轮流播放，数量自定义，效果非常棒，使用也很简单。
jquery 3d图片旋转轮播图插件
12-11
featureCarousel.js是一款能够进行3d图片旋转切换的轮播图插件。效果类似3d旋转木马，在轮播图进行图片切换的时候，后面的图片移动到前面，整体有3d视觉效果。d
360度旋转轮播图
01-18
立体式轮播图 可自行修改样式大小等
3D-立体旋转轮播
czwzx_1996的博客
06-18 727
立体旋转轮播通过腾讯公开课学习的轮播效果。
html3d旋转木马图片轮播
09-22
HTML 3D旋转木马图片轮播是一种通过使用HTML、CSS和JavaScript实现的效果，它可以将图片以3D立体的方式进行旋转展示。通过transform属性和transition属性，我们可以给每张图片添加旋转和过渡效果，同时使用position...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值