2016-11-29 24 views
-2

私はウェブサイトプロジェクトに取り組んでいます。イメージカルーセルを作りたいと思っていました。私が持っている問題は、画像が表示されていないと私は理由を知らないということです。イメージスライドショーでスライドショーが正しく表示されないのはなぜですか?

var slideIndex = 0; 
 
showSlides(); 
 

 
function showSlides() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dot"); 
 

 
    for (i = 0; i < slides.length; i++) { 
 
    slides[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex > slides.length) { 
 
    slideIndex = 1 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace("active", ""); 
 
    } 
 
    slides[slideIndex - 1].style.display = "block"; 
 
    dots[slideIndex - 1].className += " active"; 
 
    setTimeout(showSlides, 2000); 
 
}
.header { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-image: url("../background1.jpg"); 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: white; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: deeppink; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: pink; 
 
} 
 
/*Slideshow container*/ 
 

 
.mySlides { 
 
    display: none 
 
} 
 
.slideshow-container { 
 
    max-width: 1000px; 
 
    position: relative; 
 
    margin: auto; 
 
} 
 
/*Next & previous buttons */ 
 

 
.prev, 
 
.next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    margin-top: -22px; 
 
    padding: 16px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
} 
 
/* Position right next button */ 
 

 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 
/* On hover, add a black background color with a little bit see-through */ 
 

 
.prev:hover, 
 
.next:hover { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 
/* Caption text */ 
 

 
.text { 
 
    color: #f2f2f2; 
 
    font-size: 15px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    bottom: 8px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
/*Number text*/ 
 

 
.numbertext { 
 
    color: #f2f2f2; 
 
    font-size: 12px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
/*The indicators*/ 
 

 
.dot { 
 
    cursor: pointer; 
 
    height: 13px; 
 
    width: 13px; 
 
    margin: 0 2px; 
 
    background-color: #bbb; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    transition: background-color 0.6s ease; 
 
} 
 
.active, 
 
.dot:hover { 
 
    background-color: #717171; 
 
} 
 
/*Fading animation*/ 
 

 
.fade { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 1.5s; 
 
    animation-name: fade; 
 
    animation-duration: 1.5s; 
 
} 
 
@-webkit-keyframes fade { 
 
    from { 
 
    opacity: .4 
 
    } 
 
    to { 
 
    opacity: 1 
 
    } 
 
} 
 
@keyframes fade { 
 
    from { 
 
    opacity: .4 
 
    } 
 
    to { 
 
    opacity: 1 
 
    } 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Welcome to Fazbear Entertainment</title> 
 
    <link rel="stylesheet" href="css/fnaf.css" /> 
 
    <script type="text/javascript" src="js/fnaf.js"></script> 
 
    </head> 
 
    <body bgcolor="#FFB6C1"> 
 
    <div class="header"> 
 
    </div> 
 
    <div id="nav"> 
 
     <ul> 
 
     <li><a class="active" href="">Home</a> 
 
     </li> 
 
     <li><a href="">About</a> 
 
     </li> 
 
     <li><a href="">Contact</a> 
 
     </li> 
 
     <li><a href="">Prices</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="slideshow-container"> 
 
     <div class="mySlides fade"> 
 
     <div class="numbertext">1/5</div> 
 
     <img src="fnafworld.jpg" style="width:100%"> 
 
     <div class="text">Welcome to Fazbear Entertainment</div> 
 
     </div> 
 

 
     <div class="mySlides fade"> 
 
     <div class="numbertext">2/5</div> 
 
     <img src="funtimefreddy.png" style="width:100%"> 
 
     <div class="text">Funtime Freddy</div> 
 
     </div> 
 

 
     <div class="mySlides fade"> 
 
     <div class="numbertext">3/5</div> 
 
     <img src="funtimefoxy.png" style="width:100%"> 
 
     <div class="text">Funtime Foxy</div> 
 
     </div> 
 

 
     <div class="mySlides fade"> 
 
     <div class="numbertext">4/5</div> 
 
     <img src="baby.jpg" style="width:100%"> 
 
     <div class="text">Baby</div> 
 
     </div> 
 

 
     <div class="mySlides fade"> 
 
     <div class="numbertext">5/5</div> 
 
     <img src="Ballora.png" style="width:100%"> 
 
     <div class="text">Ballora</div> 
 
     </div> 
 

 
     <a class="prev" onClick="plusSlides(-1)">&#10094;</a> 
 
     <a class="next" onClick="plusSlides(1)">&#10095;</a> 
 
    </div> 
 
    <br> 
 

 
    <div style="text-align:center"> 
 
     <span class="dot" onClick="currentSlide(1)"></span> 
 
     <span class="dot" onClick="currentSlide(2)"></span> 
 
     <span class="dot" onClick="currentSlide(3)"></span> 
 
    </div> 
 
    <br /> 
 
    </body> 
 
</html>

このビット長々申し訳ありませんが、私は実際には問題が何であるかを把握したいと思います。どうもありがとうございます!

+0

画像ができるさまざまな理由が表示されません。画像のsrcが正しくない可能性があります。あなたが指定したURLなどにイメージが存在しない可能性があります。イメージsrcを確認してください。 – Manish

答えて

0

あなたはこのラインを持っている:

<img src="fnafworld.jpg" style="width:100%"> 

あなたは右のあなたのスライダーをクリックし、画像のパスをコピーしたい場合は、それはこのような何か言うだろう:あなたは必ず、あなたのことをする必要がありwww.yoursite.com/fnafworld.jpg

をイメージは本当にこのディレクトリにあります。そうでない場合は、パスを修正してください。

は、次のようになります。

<img src="resources/images/fnafworld.jpg" style="width:100%"> 
関連する問題