0
내 background-image CSS 코드를 내 HTML에 넣어야했습니다. 이유는 무엇이든 혼자서 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 ©<br>
\t \t \t </NAV>
\t \t </FOOTER>
\t
\t </BODY>
</HTML>
Welcome to StackOverflow! 실제로 배너와 함께 슬라이드 쇼를 만드는 코드는 없습니다. 슬라이드 쇼를 만들려고 했습니까? 플러그인을 사용하여 플러그인을 처리 했습니까? 플러그인을 사용하지 않으려면 지연 시간과 슬라이드 쇼를 시작하는 방법 등을 알려 주시기 바랍니다. –
[CSS 및 JQUERY로 슬라이드 쇼를 통해 여러 배경 이미지를 순환시키려는 시도] (http://stackoverflow.com/questions/30388118/trying-to-make-multiple-background-images-cycle-through-a-slideshow)를 참조하십시오. -with-css-and /) – guest271314
안녕하세요, 그렇습니다. 슬라이드 쇼를위한 코드를 구현하려고했지만, 코드를 제거하지 않았기 때문에 코드를 구현하려고했습니다. 다른 사람들이 내 작품 이미지를 추가 할 때 사용했던 방식으로 나를 보여 주면서 작업을 진행할 수 있다면 방황하고있었습니다. 이미지가 바뀌기 전에 지연이 5 초가되어야합니다. 이미지간에 페이드가 좋을까요? 어떤 도움? – Dylan5993