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

还是先来看看效果图：

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

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

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

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

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) return
        lock = true
        // 点击一次角度-90度
        deg -= 90
         // li的样式改变
        lis.css({
           "transform":"rotateX(" + deg + "deg)"
       })
        // 设置延时定时器            
       var timeout = (1 + 0.1 * lis.length) * 1000
       setTimeout(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) return
                lock = true
                // 点击一次角度-90度
                deg -= 90
                // li的样式改变
                lis.css({
                    "transform":"rotateX(" + deg + "deg)"
                })
                // 设置延时定时器            
                var timeout = (1 + 0.1 * lis.length) * 1000
                setTimeout(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) return
                lock = true
                // 点击一次角度-90度
                deg -= 90
                // li的样式改变
                lis.css({
                    "transform":"rotateX(" + deg + "deg)"
                })
                // 设置定时器            
                var timeout = (duration + delay * count) * 1000
                setTimeout(function(){
                    lock = false
                },timeout)
            })
           </script>
            
    </body>
</html>