javascript - Imej tidak boleh dimuatkan
PHP中文网
PHP中文网 2017-05-19 10:36:38
0
3
643
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        .container{
            width: 560px;
            height: 380px;
            margin: 50px auto 0;
            border: 1px solid gray;
            position: relative;
        }
        .container a{
            position:absolute;
            top: 50%;
            width:30px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            text-decoration: none;
            background: gray;
            color: #000;
        }
        .container a.left{
            left: -30px;
        }
        .container a.right{
            right: -30px;
        }
        ul{
            width: 100%;
            height: 100%;
            display: flex;
        }
        ul li{
            flex: 1;
            transform-style: preserve-3d;
            position: relative;
            transition: all 1s;
        }
        ul li:nth-child(2){
            transition: all 1s 0.1s;
        }
         ul li:nth-child(3){
            transition: all 1s 0.2s;
        }
         ul li:nth-child(4){
            transition: all 1s 0.3s;
        }
        ul li>p{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .first{
            background: url(D:\mylife\front end_projects\css\img.jpg) no-repeat;
            transform: rotateX(0deg) translateZ(190deg);
        }
         .scent{
            background: url(D:\mylife\front end_projects\css\img.jpg) no-repeat;
            transform: rotateX(-90deg) translateZ(190deg);
        }
         .three{
            background: url(D:\mylife\front end_projects\css\img.jpg) no-repeat;
            transform: rotateX(-180deg) translateZ(190deg);
        }
         .four{
            background: url(D:\mylife\front end_projects\css\img.jpg) no-repeat;
            transform: rotateX(90deg) translateZ(190deg);
        }
        ul li:nth-child(2)>p{
            background-position: -140px 0;
        }
        ul li:nth-child(3)>p{
            background-position: -280px 0;
        }
        ul li:nth-child(4)>p{
            background-position: -420px 0;
        }
    </style>
</head>
<body>
    <p class="container">
        <ul>
            <li>
                <p class="first"></p>
                <p class="scent"></p>
                <p class="three"></p>
                <p class="four"></p>
            </li>
            <li>
                <p class="first"></p>
                <p class="scent"></p>
                <p class="three"></p>
                <p class="four"></p>
            </li>
            <li>
                <p class="first"></p>
                <p class="scent"></p>
                <p class="three"></p>
                <p class="four"></p>
            </li>
            <li>
                <p class="first"></p>
                <p class="scent"></p>
                <p class="three"></p>
                <p class="four"></p>
            </li>
        </ul>
        <a href="javascropt:;" class="left"><</a>
        <a href="javascropt:;" class="right">></a>        
    </p>
<script type="text/javascript">
    (function(window){
        var btn = document.querySelectorAll("a");
        var lis = document.querySelectorAll("li");
        var num = 0;
        var flog = true;
        // 左右按钮点击
        btn[1].onclick = function(){
            lunbo(1);
        };
        btn[0].onclick = function(){
            lunbo(0);
        };
        lis[lis.length - 1 ].addEventListener("transitionend", function(){
            flog = true;
        }, false);
        // 自动播放
        var timer = null;
        timer = setInterval(function(){
            lunbo(1);
        }, 3000);
        var demo = document.querySelector(".container");
        demo.onmouseover = function(){
            clearInterval(timer);
        };
        demo.onmouseout = function(){
            timer = setInterval(function(){
                lunbo(1);
            }, 3000);
        };
        function lunbo(index){
            if(flog){
                flog = false;
                if(index){
                    num++;
                }else{
                    num--;
                };
                for( i = 0 ; i < lis.length ; i++ ){
                    lis[i].style.transform = "rotateX("+num*90+"deg)";
                };
            };
        }
    })(window)
</script>
</body>
</html>
PHP中文网
PHP中文网

认证0级讲师

membalas semua(3)
左手右手慢动作

Jika laluannya betul, adakah anda rasa ia bermasalah dengan laluan tersebut?

phpcn_u1582

Kalau keluar, sepatutnya sebab alamat gambar yang ditulis dalam css tu salah Cuba ambil gambar header protokol http dari Baidu Pictures dan akan keluar

Selain itu, kesannya kelihatan baik, putaran 3D

習慣沉默

background: url(D:mylifefront end_projectscssimg2.jpg) no-repeat;
Semua kod ini disebabkan oleh masalah laluan url dalam css hendaklah ditulis sebagai laluan relatif bagi fail css Laluan tidak ditemui.

  所以应该改为

latar belakang: url(img/2.jpg) tidak berulang;

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan