还是先来看看效果图:
通过效果图我们先理一下思路:
首先就是需要几张图片,但只有一张是显示在我们眼前的
第二步:把一张图片分成几等份,这样点击转换的时候就会分开转
第三步:就是实现点击按钮切换下一张。
HTML部分
HTML部分首先我们需要一个盒子显示图片,然后在盒子里装入图片,你想装几张图片就可以写几个li,除了图片我们还需要一个按钮来点击。
一个li的图片效果如图所示:
div是当你点击下一张的时候一个div代表li里的一张图片
代码如下:
<div class="box"><ul><!-- 一个li代表一张图片的四分之一 --><li><!-- 一个div代表一张图片 --><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设置绝对定位,不然图片不会对齐的。
<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>
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代表一张图片的四分之一 --><li><!-- 一个div代表一张图片 --><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>