如果路径对的话, 你看是不是路径里的 \ 的问题, 改成/试试 ?

能出来，应该是css里写的图片地址不对，百度图片里拿一张http协议头的图片试试，能出来的另外，效果看着不错，3d旋转

background: url(D:mylifefront end_projectscssimg2.jpg) no-repeat; 所有的这些代码都是路径出了问题，css中的url写的应该是css文件的相对路径，写绝对路径是找不到的。所以应该改为 background: url(img/2.jpg) no-repeat;

Javascript – Bild kann nicht geladen werden

<!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 Tage vor646

Javascript – Bild kann nicht geladen werden

Antworte allen(3)Ich werde antworten