背景圖片幻燈片播放？
[英]Background-Image slideshow?
問題描述
我不得不將我的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 ©<br> </NAV> </FOOTER> </BODY> </HTML>
1 個解決方案
解決方案1
0 已采納 2017-03-13 02:55:36
這段代碼說明了如何在網頁中創建基本幻燈片，記住要鏈接也要考慮到圖像的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>
如何使用 jquery 但具有 background-image 屬性創建圖像幻燈片？
[英]How to create image slideshow with jquery but with background-image property?
通過在Drupal 7中使用JQuery更改背景圖像CSS屬性來進行幻燈片顯示
[英]Slideshow by changing background-image CSS attribute using JQuery in Drupal 7
通過FadeIn / Fadeout CSS背景圖像URL的jQuery幻燈片顯示
[英]JQuery Slideshow by fadein/fadeout css background-image url
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.