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

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;

javascript - Imej tidak boleh dimuatkan

<!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中文网2857 hari yang lalu649

javascript - Imej tidak boleh dimuatkan

membalas semua(3)saya akan balas