DDR爱好者之家

JS+CSS实现3D切割轮播图
站长资源 2024/11/24 佚名
34 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了JS+CSS实现3D切割轮播图的具体代码，供大家参考，具体内容如下

第一步：我们首先要通过CSS来完成一个基本布局，利用 transform-style: preserve-3d设置成3D。

下面是CSS部分的代码

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
li {
 list-style: none;
}
/* 轮播图 */
.homePage {
 width: 800px;
 height: 200px;
 margin: 150px auto;
 background-color: pink;
 position: relative;
 /* overflow: hidden; */
}

.homePage>ul {
 width: 100%;
 height: 100%;
}

.homePage>ul>li {
 width: 200px;
 height: 100%;
 float: left;
 transform-style: preserve-3d;
 position: relative;
 transition: all 1s;
}

.homePage>ul>li>span {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.homePage>ul>li>span:nth-child(1) {
 background-image: url(../images/bxqy.jpg);
 transform: translateZ(100px);
}
.homePage>ul>li>span:nth-child(2) {
 background-image: url(../images/fczlm.jpg);
 transform: rotateX(90deg) translateZ(100px);
}
.homePage>ul>li>span:nth-child(3) {
 background-image: url(../images/hfh.jpg);
 transform: rotateX(180deg) translateZ(100px);
}
.homePage>ul>li>span:nth-child(4) {
 background-image: url(../images/ss.jpg);
 transform: rotateX(270deg) translateZ(100px);
}

/* 图片的定位 */
.homePage>ul>li:nth-child(2) span {
 background-position: -200px 0;
}
.homePage>ul>li:nth-child(3) span {
 background-position: -400px 0;
}
.homePage>ul>li:nth-child(4) span {
 background-position: -600px 0;
}

/* 小按钮 */
a {
 position: absolute;
 width: 30px;
 height: 70px;
 background-color: rgba(0,0,0,.2);
 text-decoration: none;
 color: #fff;
 top: 50%;
 margin-top: -35px;
 line-height: 70px;
 text-align: center;
 display: none;
}
.right {
 right: 0;
}

第二步：我们利用JS来调整图片运动时的切割速度以及方向。

下面是js的代码。

$(function(){
 var index = 0;
 var flag = true;
 var time = setInterval(move, 700);

 // 下一张
 function move(){
 if(!flag) return;
 flag = false;
 index++;
 $(".homePage>ul>li").css("transform","rotateX(" + (-90 * index) + "deg)").each(function(index,item){
  $(item).css("transition-delay",index * 0.2 + "s");
 });
 }

 // 移入移出
 $(".homePage").mouseenter(function(){
 clearInterval(time);
 $(".homePage>a").css("display","block");
 })
 $(".homePage").mouseleave(function(){
 time = setInterval(move, 700);
 $(".homePage>a").css("display","none");
 })

 // 点击左边按钮：上一张
 $(".left").on("click",function(){
 if(!flag) return;
 flag = false;
 index--;
 $(".homePage>ul>li").css("transform","rotateX(" + (-90 * index) + "deg)").each(function(index,item){
  $(item).css("transition-delay",index * 0.2 + "s");
 });
 })

 // 点击有面按钮：下一张
 $(".right").click(move);

 // 动画整个过渡结束之后，transitionend过渡完成时触发
 $("li:last").on("transitionend",function(){
 flag = true;
 })
})

最后：body区域代码如下

 <div class="homePage">
 <ul>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
 </ul>
 <a class="left" href="javascript:;" ><</a>
 <a class="right" href="javascript:;" </a>
 </div>
 
<script src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">


注意：要利用 overflow: hidden;来隐藏切割时超出的部分。最后3D切割轮播图就完成了。


精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米