search

Home  >  Q&A  >  body text

javascript - Image cannot be loaded

<!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中文网2858 days ago651

reply all(3)I'll reply

  • ringa_lee

    ringa_lee2017-05-19 10:38:38

    If the path is correct, do you think there is a problem with in the path? Change/try it?

    reply
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:38:38

    If it comes out, it should be because the image address written in the css is wrong. Try taking a picture of the http protocol header from Baidu Pictures and it will come out

    In addition, the effect looks good, 3D rotation

    reply
    0
  • 習慣沉默

    習慣沉默2017-05-19 10:38:38

    background: url(D:mylifefront end_projectscssimg2.jpg) no-repeat;
    All these codes are path problems. The url in css should be the relative path of the css file. If you write the absolute path, it will not be found. .

      所以应该改为
    

    background: url(img/2.jpg) no-repeat;

    reply
    0
  • Cancelreply