个人中心
gpt4 book ai didi

javascript - 背景图片幻灯片？

转载 作者：行者123 更新时间：2023-11-28 04:10:10 25 4
gpt4 key购买 nike

我不得不将我的标题的 background-image CSS 代码放在我的 HTML 中，因为出于某种原因它不能单独在 CSS 文件中工作，但无论如何我一直在尝试所有这些不同的方法制作幻灯片但没有任何效果有人可以帮助指导我吗？顺便说一句，我有 4 张横幅图片，它们都称为 banner1、banner2、banner3、banner4.jpg 并且位于在我的 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
{
	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%;
}
<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>

最佳答案

此代码显示了如何在网页中创建基本幻灯片放映，重要的是要记住链接也要考虑图像的 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>

关于javascript - 背景图片幻灯片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42755913/

25 4 0
文章推荐： html - 为什么我的搜索栏中的占位符文本没有出现在 Firefox 中
文章推荐： c++ - 如何读取文本文件的第 2、3 和 4 行。 C++
文章推荐： C++ - 是否可以在没有继承的情况下使用另一个类的方法？
文章推荐： html - 如何根据窗口分辨率自动调整图像大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com