背景画像スライドショー？

Question

何かの理由でCSSファイルだけでは動作しなかったので、自分のヘッダーに私のbackground-image CSSコードを入れなければなりませんでしたが、とにかくスライドショーを作成するためにこれらの方法を試してみましたが、教えて？ Btw私はbanner1、banner2、banner3、banner4.jpgと呼ばれる4つのバナー画像を持っていて、私のIMAGES/banner1.jpgフォルダにあります。

$(document).ready(function(){ 
 
    // Add smooth scrolling to all links 
 
    $("a").on('click', function(event) { 
 

 
    // Make sure this.hash has a value before overriding default behavior 
 
    if (this.hash !== "") { 
 
     // Prevent default anchor click behavior 
 
     event.preventDefault(); 
 

 
     // Store hash 
 
     var hash = this.hash; 
 

 
     // Using jQuery's animate() method to add smooth page scroll 
 
     // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area 
 
     $('html, body').animate({ 
 
     scrollTop: $(hash).offset().top 
 
     }, 800, function(){ 
 
    
 
     // Add hash (#) to URL when done scrolling (default click behavior) 
 
     window.location.hash = hash; 
 
     }); 
 
    } // End if 
 
    }); 
 
});

body 
 
{ 
 
\t background-color: #808080; 
 

 
} 
 
p 
 
{ 
 
\t !-- 
 
} 
 
p.homeclassheader 
 
{ 
 
\t font-weight: bold; 
 
\t font-size: 35px; 
 
\t font-family: Tahoma, Geneva, sans-serif; 
 
\t line-height: 150%; 
 
\t text-align: center; 
 
\t color: white; 
 
\t text-shadow: 2px 2px 3px grey; 
 
\t word-spacing: 3px; 
 
\t letter-spacing: -1; 
 
\t font-variant: small-caps; 
 
} 
 
header 
 
{ 
 
\t text-align:center; 
 
\t text-shadow: 2px 2px 3px grey; 
 
\t color: silver; \t \t 
 
\t padding: 20px 0px 0px 0px; 
 
\t border-bottom: #808080; 
 
\t position: fixed; 
 
\t border-bottom: 2px solid #00FFF5; 
 
\t top: -10; 
 
\t height: 150px; 
 
\t left: -10; 
 
\t width: 105%; 
 
\t z-index:5; 
 
} \t \t 
 
header a 
 
{ 
 
\t text-decoration: none; 
 
\t text-align:center; 
 
\t text-shadow: 2px 2px 5px grey; 
 
\t font-weight: bold; 
 
\t font-size: 40px; 
 
\t font-family: Tahoma, Geneva, sans-serif; 
 
\t line-height: 100%; 
 
\t color: white; 
 
\t word-spacing: 3px; 
 
\t letter-spacing: -1; 
 
\t font-variant: small-caps; 
 

 
} 
 
hr { 
 
    border: 0; 
 
    height: 2px; 
 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
 
} 
 
header a:visited 
 
{ 
 
\t text-decoration: none; 
 
\t text-align:center; 
 
\t text-shadow: 2px 2px 3px grey; 
 
\t color: silver; \t \t 
 

 
} 
 
article 
 
{ 
 

 
} 
 
article.homeclass 
 
{ 
 
\t text-align:center; 
 
\t color: silver; \t \t \t 
 
\t padding: 0px 20px 0px 20px; 
 
    background-color: #393E46; 
 
\t border-bottom: 2px solid #00FFF5; 
 
\t border-top: 2px solid #00FFF5; 
 
\t height: 350px; 
 
\t float: left; 
 
\t width: 75%; 
 
\t max-width: 350px; 
 
\t margin: 0 auto; 
 
} 
 
article.homeclass img 
 
{ \t 
 
\t float: right; 
 
\t margin-left: 30px; 
 
\t margin-right: 25px; 
 
\t margin-top: -15px; 
 
\t margin-bottom: 0px; 
 
} 
 
ul.menu { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
\t font-weight: bold; 
 
\t font-size: 15px; 
 
\t font-family: "Comic Sans MS", cursive, sans-serif; 
 
    background-color: #393E46; 
 
\t position: fixed; 
 
\t top: 180; 
 
\t width:99%; 
 
\t z-index:5; 
 

 
} 
 

 
ul.menu li { 
 
    float: left; 
 
} 
 

 
ul.menu li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
\t border-bottom: 2px solid #00FFF5; 
 
    -moz-transition: background-color .3s ease-in; 
 
\t -webkit-transition: background-color .3s ease-in; 
 
\t -o-transition: background-color .3s ease-in; 
 
\t transition: background-color .3s ease-in; 
 
} 
 

 
ul.menu li a:hover { 
 
    background-color: #00ADB5; 
 
    color: black; 
 
\t -moz-transition: background-color 0.01s; 
 
\t -webkit-transition: background-color 0.01s; 
 
\t -o-transition: background-color 0.01s; 
 
\t transition: background-color 0.01s; 
 
} 
 

 
a:visited 
 
{ 
 
\t text-decoration: none; 
 
} 
 

 
a:link 
 
a:focus 
 
a:hover 
 
a:active 
 
footer a 
 
{ 
 
\t text-decoration: none; 
 
\t text-align:center; 
 
\t color: #00FFF5; \t 
 
} 
 
footer 
 
{ 
 
\t text-align:center; 
 
\t color: silver; \t \t 
 
    background-color: #393E46; 
 
\t padding: 10px 0px 0px 0px; 
 
\t border-bottom: #808080; 
 
\t position: absolute; 
 
\t bottom: 0px; 
 
\t height: 25px; 
 
\t border-top: 2px solid #00FFF5; 
 
\t width: 105%; 
 
}

<HTML> 
 
\t <HEAD> 
 
\t \t <LINK rel="stylesheet" type="text/css" href="CSS/styles.css"> 
 
\t \t <TITLE>Las Vegas | Home</TITLE> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t \t <script src="JAVASCRIPT/scrolleffect.js"></script> 
 

 
\t </HEAD> 
 
\t <BODY> 
 
\t \t <HEADER> 
 
\t \t <style> 
 
\t \t header { 
 
\t \t \t background-image: url("IMAGES/banner1.jpg"); 
 
\t \t } 
 
\t \t </style> 
 
\t \t \t <a name="top"><H1>Las Vegas</H1></A> 
 
\t \t </HEADER> 
 
\t \t <div id="home"></div> 
 
\t \t <br> 
 
\t \t <br><br><br><br><br><br><hr><br><br> 
 
\t \t <br> 
 
\t \t <ARTICLE class="homeclass"> 
 
\t \t <p class="homeclassheader">Accommodation</p> 
 
\t \t <hr> 
 
\t \t <p class="class2">Hotel 1</p> 
 
\t \t <p class="class2">Hotel 2</p> 
 
\t \t <p class="class2">Hotel 3</p> 
 
\t \t <hr> 
 
\t \t </ARTICLE> 
 
\t \t <br><br><br><br><br><br> 
 
\t \t <FOOTER> 
 
\t \t \t <NAV> 
 
\t \t \t \t All Copyright reserved to Dylan 2017 &copy;<br> 
 
\t \t \t </NAV> 
 
\t \t </FOOTER> 
 
\t 
 
\t </BODY> 
 
</HTML>

Answer 1

は、このコードは、あなたがそれも考慮に入れ、それから来ている場合は、あなたのイメージのSRCを取るためにリンクすることを覚えておくことが重要である、あなたのWebページでの基本的なスライドショーを作成する方法を示してimagesフォルダには、それを正しく参照する必要があります。 src="./images/lifeofpi.jpg"たとえば、画像のフォルダからlifeofpi.jpgというイメージを取得しています。 <link rel>があなたのウェブサイトの先頭に置かれていることを確認してください。 （自動スライドショー）

<!DOCTYPE html> 
<html> 
<title>Test</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css"> 
<style> 
.mySlides {display:none;} 
</style> 
<body> 

<h2 class="w3-center">Automatic Slideshow</h2> 

<div class="w3-content w3-section" style="max-width:500px"> 
<img class="mySlides" src="img_la.jpg" style="width:100%"> 
<img class="mySlides" src="img_ny.jpg" style="width:100%"> 
<img class="mySlides" src="img_chicago.jpg" style="width:100%"> 
</div> 

<script> 
var myIndex = 0; 
carousel(); 

function carousel() { 
var i; 
var x = document.getElementsByClassName("mySlides"); 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
} 
myIndex++; 
if (myIndex > x.length) {myIndex = 1}  
x[myIndex-1].style.display = "block"; 
setTimeout(carousel, 5000); // Change image every 5 seconds 
} 
</script> 

</body> 
</html>