Bild kann in meiner Seite nicht zeigen

<!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>div{ 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
     } 
     .first{ 
      background: url(D:\mylife\front end_projects\css\img\1.jpg) no-repeat; 
      transform: rotateX(0deg) translateZ(190deg); 
     } 
     .scent{ 
      background: url(D:\mylife\front end_projects\css\img\2.jpg) no-repeat; 
      transform: rotateX(-90deg) translateZ(190deg); 
     } 
     .three{ 
      background: url(D:\mylife\front end_projects\css\img\3.jpg) no-repeat; 
      transform: rotateX(-180deg) translateZ(190deg); 
     } 
     .four{ 
      background: url(D:\mylife\front end_projects\css\img\4.jpg) no-repeat; 
      transform: rotateX(90deg) translateZ(190deg); 
     } 
     ul li:nth-child(2)>div{ 
      background-position: -140px 0; 
     } 
     ul li:nth-child(3)>div{ 
      background-position: -280px 0; 
     } 
     ul li:nth-child(4)>div{ 
      background-position: -420px 0; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <ul> 
      <li> 
       <div class="first"></div> 
       <div class="scent"></div> 
       <div class="three"></div> 
       <div class="four"></div> 
      </li> 
      <li> 
       <div class="first"></div> 
       <div class="scent"></div> 
       <div class="three"></div> 
       <div class="four"></div> 
      </li> 
      <li> 
       <div class="first"></div> 
       <div class="scent"></div> 
       <div class="three"></div> 
       <div class="four"></div> 
      </li> 
      <li> 
       <div class="first"></div> 
       <div class="scent"></div> 
       <div class="three"></div> 
       <div class="four"></div> 
      </li> 
     </ul> 
     <a href="javascropt:;" class="left">&lt;</a> 
     <a href="javascropt:;" class="right">&gt;</a>   
    </div> 
<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>

Können Sie mir etwas sagen, was ich falsch gemacht habe Hier ist, was die Seite zeigen:? 4 Bilder alle nicht in browser.How zeigen kann, kann ich damit umgehen ist der Weg falsch?Bild kann in meiner Seite nicht zeigen

Quelle

2017-04-19 Anne

Ihre Pfade scheinen von 'D:' auf dem Dateisystem zu stammen-- läuft das lokal? Selbst wenn dies der Fall ist, würde ich empfehlen, einen einfachen Server für Ihre Dateien zu verwenden, damit Sie Ihren Pfad nicht wesentlich anpassen müssen, wenn Sie _do_ auf einem Server bereitstellen ... –

[Relative Pfade nicht absolut verwenden] (https://css-tricks.com/quick-reminder-about-file-paths/) – DaniP

den Verweis auf die D entfernen: // Laufwerk und die Wege entweder an den Ort Ihrer HTML-Datei relativ machen oder sie http für absolute Pfade dienen über. Beispiel:

.first{ 
     /* Relative */ 
     background: url(/css/img/1.jpg) no-repeat; 
     /* Absolute */ 
     background: url(http://mywebserver.dev/css/img/1.jpg) no-repeat; 
}

Quelle

2017-04-19 14:45:22 JasonBoss

Bild kann in meiner Seite nicht zeigen

Antwort

Verwandte Themen