1200字范文 > 使用html+css+jquery实现3D轮播图

使用html+css+jquery实现3D轮播图

时间：2022-04-08 07:51:21

还是先来看看效果图：

通过效果图我们先理一下思路：

首先就是需要几张图片，但只有一张是显示在我们眼前的

第二步：把一张图片分成几等份，这样点击转换的时候就会分开转

第三步：就是实现点击按钮切换下一张。

HTML部分

HTML部分首先我们需要一个盒子显示图片，然后在盒子里装入图片，你想装几张图片就可以写几个li,除了图片我们还需要一个按钮来点击。

一个li的图片效果如图所示：

div是当你点击下一张的时候一个div代表li里的一张图片

代码如下：

<div class="box"><ul><li><div></div><div></div><div></div><div></div></li><li><div></div><div></div><div></div><div></div></li><li><div></div><div></div><div></div><div></div></li><li><div></div><div></div><div></div><div></div></li></ul></div><input type="button" value="下一张" class="btn">

CSS部分

css部分就是设置样式了，首先就是先给盒子一个宽高，盒子是装显示一张图片的，接下来就是li了，给li设置绝对定位，不然图片不会对齐的。

Jquery部分

这里需要注意的是，如果你不设置一个开过和定时器，当你点击下一张时点击一次没问题，但是连续点击就会出现一点bug，所以我加了一个开关思想，只有一张图片完整的呈现在眼前后，下一张图片才能出来。

<script src="./js/jquery-1.11.3.js"></script><script>var btn = $('.btn')var lis = $('.box ul li')// 角度var deg = 0// 开关var lock = false// 按钮点击事件btn.click(function(){if(lock) returnlock = true// 点击一次角度-90度deg -= 90// li的样式改变lis.css({"transform":"rotateX(" + deg + "deg)"})// 设置延时定时器 var timeout = (1 + 0.1 * lis.length) * 1000setTimeout(function(){lock = false},timeout)})</script>

整体代码

<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图</title><style>*{margin: 0;padding: 0;list-style: none;}/* 给盒子设置宽高，用于显示一张图片的 */.box{position: relative;width: 600px;height: 360px;margin: 80px auto;border: 1px solid;}.box ul li{position: absolute;top: 0;width: 150px;height: 360px;/* 让转换的子元素位于3D转换空间中 */transform-style: preserve-3d;perspective: 50000px;/* 过渡效果 */transition: all 1s ease 0s;}/* 设置li的左边距和延迟时间*/.box ul li:nth-child(1){left: 0;transition-delay: 0s;}.box ul li:nth-child(2){left: 150px;transition-delay: 0.1s;}.box ul li:nth-child(3){left: 300px;transition-delay: 0.2s;}.box ul li:nth-child(4){left: 450px;transition-delay: 0.3s;}/* 设置div */.box ul li div{position: absolute;top: 0;left: 0;height: 100%;width: 100%;/* 图片大小 */background-size: 600px 360px;}/* 设置图片旋转一次90度*/.box ul li div:nth-child(1){background-image: url(./img/ruili_img3.jpg);transform: rotateX(0deg) translateZ(180px);}.box ul li div:nth-child(2){background-image: url(./img/ruili_img5.jpg);transform: rotateX(90deg) translateZ(180px);}.box ul li div:nth-child(3){background-image: url(./img/ruili_img6.jpg);transform: rotateX(180deg) translateZ(180px);}.box ul li div:nth-child(4){background-image: url(./img/ruili_img7.jpg);transform: rotateX(270deg) translateZ(180px);}/* background-position:设置或检索对象的背景图像的位置，必须要先制定background-image属性一个代表横坐标，一个代表纵坐标*/.box ul li:nth-child(1) div{background-position: 0 0 ;}.box ul li:nth-child(2) div{background-position: -150px 0 ;}.box ul li:nth-child(3) div{background-position: -300px 0 ;}.box ul li:nth-child(4) div{background-position: -450px 0 ;}/* 设置按钮 */.btn{display: block;margin: 0 auto;}</style></head><body><div class="box"><ul><li><div></div><div></div><div></div><div></div></li><li><div></div><div></div><div></div><div></div></li><li><div></div><div></div><div></div><div></div></li><li><div></div><div></div><div></div><div></div></li></ul></div><input type="button" value="下一张" class="btn"><script src="./js/jquery-1.11.3.js"></script><script>var btn = $('.btn')var lis = $('.box ul li')// 角度var deg = 0// 开关var lock = false// 按钮点击事件btn.click(function(){if(lock) returnlock = true// 点击一次角度-90度deg -= 90// li的样式改变lis.css({"transform":"rotateX(" + deg + "deg)"})// 设置延时定时器 var timeout = (1 + 0.1 * lis.length) * 1000setTimeout(function(){lock = false},timeout)})</script></body></html>

这样写的话我们会发现其实有的数据都是固定的，想要改的话很麻烦，下面这种方法是使用jquery渲染的方式现实，这样改数据就很简单了，并且代码量也少一点。

就是把数据通过渲染的方式写出来，而且这种方法也更方便，比如把count改成40，就会一张图片分成40等份，切换下一张图片的时候就会40个切换，而不是四个了。

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图</title><style>*{margin: 0;padding: 0;list-style: none;}/* 给盒子设置宽高，用于显示一张图片的 */.box{position: relative;width: 600px;height: 360px;margin: 80px auto;/* border: 1px solid; */}.box ul li{position: absolute;top: 0;width: 150px;height: 360px;/* 让转换的子元素位于3D转换空间中 */transform-style: preserve-3d;perspective: 50000px;/* 过渡效果 */transition: all 1s ease 0s;}/* 设置div */.box ul li div{position: absolute;top: 0;left: 0;height: 100%;width: 100%;/* 图片大小 */background-size: 600px 360px;}.box ul li div:nth-child(1){background-image: url(./img/ruili_img3.jpg);transform: rotateX(0deg) translateZ(180px);}.box ul li div:nth-child(2){background-image: url(./img/ruili_img5.jpg);transform: rotateX(90deg) translateZ(180px);}.box ul li div:nth-child(3){background-image: url(./img/ruili_img6.jpg);transform: rotateX(180deg) translateZ(180px);}.box ul li div:nth-child(4){background-image: url(./img/ruili_img7.jpg);transform: rotateX(270deg) translateZ(180px);}/* 设置按钮 */.btn{display: block;margin: 0 auto;}</style></head><body><div class="box"><ul></ul></div><input type="button" value="下一张" class="btn"><script src="./js/jquery-1.11.3.js"></script><script>var box = $('.box')var ul = $('.box ul')// 设置一张图片分为几等份var count = 4// 持续时间var duration = 1// 延迟时间var delay = 0.1// 图片宽度var width = box.width()// li的宽度var liWidth = width / count// 渲染数据for(let i = 0;i < count;i++){var li = $("<li><div></div><div></div><div></div><div></div></li>")// 设置li的样式li.css({"width": liWidth,"left": i * liWidth + 'px',"transition-delay":i * delay + 's',"transition-duration":duration + 's',}).children().css('background-position',-i * liWidth + 'px 0')ul.append(li)}var btn = $('.btn')var lis = $('.box ul li')// 角度var deg = 0// 开关var lock = false// 按钮点击事件btn.click(function(){if(lock) returnlock = true// 点击一次角度-90度deg -= 90// li的样式改变lis.css({"transform":"rotateX(" + deg + "deg)"})// 设置定时器 var timeout = (duration + delay * count) * 1000setTimeout(function(){lock = false},timeout)})</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。