Question

我必须在我的HTML中为我的标题添加background-image CSS代码，因为由于某些原因它不能单独在CSS文件中工作，但无论如何我一直在尝试所有这些不同的方式来制作幻灯片但没有什么工作可以有人帮助指导我吗？顺便说一下，我有4个横幅图片，全部称为banner1，banner2，banner3，banner4.jpg，位于我的IMAGES/banner1.jpg文件夹中。

＆＃13;

$(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
  });  
});

＆＃13;

body
{
	background-color: #808080;

}
p
{
	!-- 
}
p.homeclassheader
{
	font-weight: bold;
	font-size: 35px;
	font-family: Tahoma, Geneva, sans-serif;
	line-height: 150%;
	text-align: center;
	color: white;
	text-shadow: 2px 2px 3px grey;
	word-spacing: 3px;
	letter-spacing: -1;
	font-variant: small-caps;
}
header
{
	text-align:center;
	text-shadow: 2px 2px 3px grey;
	color: silver;		
	padding: 20px 0px 0px 0px;
	border-bottom: #808080;
	position: fixed;
	border-bottom: 2px solid #00FFF5;
	top: -10;
	height: 150px;
	left: -10;
	width: 105%;
	z-index:5;
}		
header a
{
	text-decoration: none;
	text-align:center;
	text-shadow: 2px 2px 5px grey;
	font-weight: bold;
	font-size: 40px;
	font-family: Tahoma, Geneva, sans-serif;
	line-height: 100%;
	color: white;
	word-spacing: 3px;
	letter-spacing: -1;
	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
{
	text-decoration: none;
	text-align:center;
	text-shadow: 2px 2px 3px grey;
	color: silver;		

}
article
{

}
article.homeclass
{
	text-align:center;
	color: silver;			
	padding: 0px 20px 0px 20px;
    background-color: #393E46;
	border-bottom: 2px solid #00FFF5;
	border-top: 2px solid #00FFF5;
	height: 350px;
	float: left;
	width: 75%;
	max-width: 350px;
	margin: 0 auto;
}
article.homeclass img
{	
	float: right;
	margin-left: 30px;
	margin-right: 25px;
	margin-top: -15px;
	margin-bottom: 0px;
}
ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	font-weight: bold;
	font-size: 15px;
	font-family: "Comic Sans MS", cursive, sans-serif;
    background-color: #393E46;
	position: fixed;
	top: 180;
	width:99%;
	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;
	border-bottom: 2px solid #00FFF5;
    -moz-transition: background-color .3s ease-in;
	-webkit-transition: background-color .3s ease-in;
	-o-transition: background-color .3s ease-in;
	transition: background-color .3s ease-in;
}

ul.menu li a:hover {
    background-color: #00ADB5;
    color: black;
	-moz-transition: background-color 0.01s;
	-webkit-transition: background-color 0.01s;
	-o-transition: background-color 0.01s;
	transition: background-color 0.01s;
}

a:visited
{
	text-decoration: none;
}

a:link
a:focus
a:hover
a:active
footer a
{
	text-decoration: none;
	text-align:center;
	color: #00FFF5;	
}
footer
{
	text-align:center;
	color: silver;		
    background-color: #393E46;
	padding: 10px 0px 0px 0px;
	border-bottom: #808080;
	position: absolute;
	bottom: 0px;
	height: 25px;
	border-top: 2px solid #00FFF5;
	width: 105%;
}

＆＃13;

<HTML>
	<HEAD>
		<LINK rel="stylesheet" type="text/css" href="CSS/styles.css">
		<TITLE>Las Vegas | Home</TITLE>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src="JAVASCRIPT/scrolleffect.js"></script>

	</HEAD>
	<BODY>
		<HEADER>
		<style>
		header {
			background-image: url("IMAGES/banner1.jpg");
		}
		</style>
			<a name="top"><H1>Las Vegas</H1></A>
		</HEADER>
		<div id="home"></div>
		<br>
		<br><br><br><br><br><br><hr><br><br>
		<br>
		<ARTICLE class="homeclass">
		<p class="homeclassheader">Accommodation</p>
		<hr>
		<p class="class2">Hotel 1</p>
		<p class="class2">Hotel 2</p>
		<p class="class2">Hotel 3</p>
		<hr>
		</ARTICLE>
		<br><br><br><br><br><br>
		<FOOTER>
			<NAV>
				All Copyright reserved to Dylan 2017 &copy;<br>
			</NAV>
		</FOOTER>
	
	</BODY>
</HTML>

＆＃13;

Answer 1

此代码显示了如何在网页中创建基本幻灯片，重要的是要记住链接还要考虑图像的src，如果它来自图像文件夹，那么你必须正确引用它。 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>

背景图片幻灯片？

1 个答案: