背景图片幻灯片播放？

Question

我不得不将我的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>

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 个解决方案

解决方案1
0 已采纳 2017-03-13 02:55:36

背景图片幻灯片播放？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-13 02:55:36

解决方案1
0 已采纳 2017-03-13 02:55:36