如何让我的图片幻灯片落后于我的 header
How do I make my picture slideshow stay behind my header
我想做一个自动图片幻灯片放映，每张图片下面都有点。我根本不知道如何使用 javascript，只是 html/css，所以我在网上找到了这个代码片段，但我无法让幻灯片在我固定的 header 后面滚动。有什么建议么？另外，如果有人知道如何使点可点击以自动更改图片，那也太好了！基本上，我希望我的幻灯片像 http://www.eatchronictacos.com 上的那样，减去悬停在一个点上时的图像预览。谢谢大家
这是一个代码笔：http://codepen.io/nrojina0/pen/jAZVJE
这是我的 html（包含整个幻灯片代码片段）：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style4.css">
<title>
Bonlee Grown Farm
</title>
</head>
<body>
<div id="header">
<div id="logo"> Bonlee Grown Farm </div> <div id="address"> 650 Al Davis Road <br> <p style="font-size: 0.1em"> <br> </p> Bear Creek, NC 27207 <p style="font-size: 0.1em"> <br> </p> Home: (919)837-2937 | Cell: (012)345-6789 <p style="font-size: 0.1em"> <br> </p> amyraysugg@embarqmail.com </div>
<nav>
<ul>
<li> <a href="BonleeGrownFarm2.html"> Home </a> </li>
<li> <a href="OurStory.html"> Our Story </a> </li>
<li>
<a href="WheretoFindUs.html"> Where to Find Us </a>
<ul>
<li> <a href="Market1.html"> Market1 </a> </li>
<li> <a href="Market2.html"> Market2 </a> </li>
<li> <a href="Market3.html"> Market3 </a> </li>
<li> <a href="Market4.html"> Market4 </a> </li>
</ul>
</li>
<li> <a href="FromOurFarm.html"> From Our Farm </a> </li>
<li>
<a href="FromOurKitchen.html"> From Our Kitchen </a>
<ul>
<li> <a href="Jams.html"> Jams </a> </li>
<li> <a href="Jellies.html"> Jellies </a> </li>
<li> <a href="Pickled.html"> All Things Pickled </a> </li>
<li> <a href="Relishes.html"> Relishes </a> </li>
<li> <a href="Mustards.html"> Mustards </a> </li>
<li> <a href="Miscellaneous.html"> Miscellaneous </a> </li>
</ul>
</li>
<li> <a href="CarolinaBabe.html"> Carolina Babe </a> </li>
</ul>
</nav>
</div>
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin-left: 1%;
z-index: 2;
/* max-height: 500px;
*/}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
margin-bottom: 3%;
font-family: Verdana,sans-serif;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
margin-top: 3%;
margin-left: 2.5%;
font-family: Verdana,sans-serif;s
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="https://www.kowalskis.com/sites/kowalskis.com/files/images/signature-products/signature-jams.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="http://i.parkseed.com/images/xxl/51659-pk-p1.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="https://spoonuniversity.com/wp-content/uploads/sites/100/2016/06/produce.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="http://static.wixstatic.com/media/a63fc0_89452cdd3605426791e345d6b3679883.jpg_srz_126_148_85_22_0.50_1.20_0.00_jpg_srz" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<div style="text-align:left; margin-top: -1%; margin-left: 32.8%">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
</body>
</html>
这是我的 CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */
/*-------------------------------------------------------------------------*/
body {
background-color: #254117;
color: white;
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
margin-top: 12em;
/* ADDED TO MAKE HEADER FIXED*/
font-family: Garamond, Times;
}
#header {
/* ADDED TO MAKE HEADER FIXED*/
position: fixed;
/* ADDED TO MAKE HEADER FIXED*/
width: 100%;
/* ADDED TO MAKE HEADER FIXED*/
top: 0;
/* ADDED TO MAKE HEADER FIXED*/
height: 15em;
/* ADDED TO MAKE HEADER FIXED*/
background-color: #254117;
/* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/
#logo {
font-size: 2em;
width: 60%;
display: inline;
float: left;
text-align: center;
font-family: cursive;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
#address {
width: 31%;
display: inline;
font-family: cursive;
font-size: 1.5em;
float: right;
/*text-align: right;*/
margin-bottom: 0.75em;
margin-right: 1em;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */
/*-------------------------------------------------------------------------*/
nav {
width: 99%;
margin: 20px 0.5%;
clear: both;
/*position: fixed;*/
}
nav > ul {
list-style: none;
/*overflow: hidden;*/
overflow: auto;
}
nav > ul li {
float: left;
width: 16.6666%;
}
/*FFEE2E*/
nav > ul li > a {
text-align: center;
/*text-shadow: 2px 1px 2px ; include text shadow or no? */
font-family: Garamond, Times;
padding: 8px 0;
display: block;
/*width: 97.5%;*/
border-top: 4px solid #FFEE2E;
border-right: 4px solid #E5C000;
border-bottom: 4px solid #E5C000;
border-left: 4px solid #FFEE2E;
background-color: #FCD717;
font-size: 1.5em;
}
nav > ul li > a,
nav > ul li:focus > a,
nav > ul li:visited > a,
nav > ul li:hover > a,
nav > ul li:active > a {
text-decoration: none;
color: #0000EE;
}
nav > ul li:hover > a,
nav > ul li:active > a {
background-color: #FFE424;
border-top: 4px solid #E5C000;
border-right: 4px solid #FFE424;
border-bottom: 4px solid #FFE424;
border-left: 4px solid #E5C000;
border-radius: 0;
}
nav > ul li:first-child a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */
/*-------------------------------------------------------------------------*/
nav li > ul li {
display: block;
width: 99%;
}
nav li > ul {
display: none;
width: inherit;
}
nav li > ul li:first-child a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li:hover > ul {
display: block;
}
nav li:hover > ul {
position: absolute;
display: block;
}
/* ^NAVIGATION BAR - LEVEL 2 */
/*-------------------------------------------------------------------------*/
table tr#firstrow td{
background-color: #eee;
color: #8B4513;
font-weight: bold;
}
table{
width: 80%;
margin: 20px 0.5%;
font-family: Arial;
font-size: 1.12em;
margin: auto;
clear: both;
table-layout: fixed;
}
table tr td{
text-decoration: none;
color: white;
}
table tbody tr:nth-child(2n) td {
background: #CA240C;
}
table tbody tr:nth-child(2n+1) td {
background: #FF7159;
}
table tr td{
padding: 0.75%;
margin: 0 auto;
}
table tr td#kitchenfirstcolumn{
width: 30%;
}
table tr td#kitchenothercolumns{
width: 70%;
}
table tr td#farmfirstcolumn{
width: 18%;
}
table tr td#farmsecondcolumn{
width: 20%;
}
table tr td#farmothercolumns{
width: 62%;
}
/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/
img{
max-width:100%;
max-height: 100%;
padding: 3%;
}
/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/
h1{
font-size: 1.5em;
font-family: Palatinos, cursive;
}
h2{
font-size: 3em;
font-family: Palatinos, cursive;
text-align: center;
}
/*-------------------------------------------------------------------------*/
将 z-index: 3 添加到 css 中的 #header，我猜它会按预期工作：
#header {
position: fixed;
width: 100%;
top: 0;
height: 15em;
background-color: #254117;
z-index: 3;
}
我想做一个自动图片幻灯片放映，每张图片下面都有点。我根本不知道如何使用 javascript，只是 html/css，所以我在网上找到了这个代码片段，但我无法让幻灯片在我固定的 header 后面滚动。有什么建议么？另外，如果有人知道如何使点可点击以自动更改图片，那也太好了！基本上，我希望我的幻灯片像 http://www.eatchronictacos.com 上的那样，减去悬停在一个点上时的图像预览。谢谢大家
这是一个代码笔：http://codepen.io/nrojina0/pen/jAZVJE
这是我的 html（包含整个幻灯片代码片段）：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style4.css">
<title>
Bonlee Grown Farm
</title>
</head>
<body>
<div id="header">
<div id="logo"> Bonlee Grown Farm </div> <div id="address"> 650 Al Davis Road <br> <p style="font-size: 0.1em"> <br> </p> Bear Creek, NC 27207 <p style="font-size: 0.1em"> <br> </p> Home: (919)837-2937 | Cell: (012)345-6789 <p style="font-size: 0.1em"> <br> </p> amyraysugg@embarqmail.com </div>
<nav>
<ul>
<li> <a href="BonleeGrownFarm2.html"> Home </a> </li>
<li> <a href="OurStory.html"> Our Story </a> </li>
<li>
<a href="WheretoFindUs.html"> Where to Find Us </a>
<ul>
<li> <a href="Market1.html"> Market1 </a> </li>
<li> <a href="Market2.html"> Market2 </a> </li>
<li> <a href="Market3.html"> Market3 </a> </li>
<li> <a href="Market4.html"> Market4 </a> </li>
</ul>
</li>
<li> <a href="FromOurFarm.html"> From Our Farm </a> </li>
<li>
<a href="FromOurKitchen.html"> From Our Kitchen </a>
<ul>
<li> <a href="Jams.html"> Jams </a> </li>
<li> <a href="Jellies.html"> Jellies </a> </li>
<li> <a href="Pickled.html"> All Things Pickled </a> </li>
<li> <a href="Relishes.html"> Relishes </a> </li>
<li> <a href="Mustards.html"> Mustards </a> </li>
<li> <a href="Miscellaneous.html"> Miscellaneous </a> </li>
</ul>
</li>
<li> <a href="CarolinaBabe.html"> Carolina Babe </a> </li>
</ul>
</nav>
</div>
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin-left: 1%;
z-index: 2;
/* max-height: 500px;
*/}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
margin-bottom: 3%;
font-family: Verdana,sans-serif;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
margin-top: 3%;
margin-left: 2.5%;
font-family: Verdana,sans-serif;s
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="https://www.kowalskis.com/sites/kowalskis.com/files/images/signature-products/signature-jams.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="http://i.parkseed.com/images/xxl/51659-pk-p1.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="https://spoonuniversity.com/wp-content/uploads/sites/100/2016/06/produce.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="http://static.wixstatic.com/media/a63fc0_89452cdd3605426791e345d6b3679883.jpg_srz_126_148_85_22_0.50_1.20_0.00_jpg_srz" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<div style="text-align:left; margin-top: -1%; margin-left: 32.8%">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
</body>
</html>
这是我的 CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */
/*-------------------------------------------------------------------------*/
body {
background-color: #254117;
color: white;
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
margin-top: 12em;
/* ADDED TO MAKE HEADER FIXED*/
font-family: Garamond, Times;
}
#header {
/* ADDED TO MAKE HEADER FIXED*/
position: fixed;
/* ADDED TO MAKE HEADER FIXED*/
width: 100%;
/* ADDED TO MAKE HEADER FIXED*/
top: 0;
/* ADDED TO MAKE HEADER FIXED*/
height: 15em;
/* ADDED TO MAKE HEADER FIXED*/
background-color: #254117;
/* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/
#logo {
font-size: 2em;
width: 60%;
display: inline;
float: left;
text-align: center;
font-family: cursive;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
#address {
width: 31%;
display: inline;
font-family: cursive;
font-size: 1.5em;
float: right;
/*text-align: right;*/
margin-bottom: 0.75em;
margin-right: 1em;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */
/*-------------------------------------------------------------------------*/
nav {
width: 99%;
margin: 20px 0.5%;
clear: both;
/*position: fixed;*/
}
nav > ul {
list-style: none;
/*overflow: hidden;*/
overflow: auto;
}
nav > ul li {
float: left;
width: 16.6666%;
}
/*FFEE2E*/
nav > ul li > a {
text-align: center;
/*text-shadow: 2px 1px 2px ; include text shadow or no? */
font-family: Garamond, Times;
padding: 8px 0;
display: block;
/*width: 97.5%;*/
border-top: 4px solid #FFEE2E;
border-right: 4px solid #E5C000;
border-bottom: 4px solid #E5C000;
border-left: 4px solid #FFEE2E;
background-color: #FCD717;
font-size: 1.5em;
}
nav > ul li > a,
nav > ul li:focus > a,
nav > ul li:visited > a,
nav > ul li:hover > a,
nav > ul li:active > a {
text-decoration: none;
color: #0000EE;
}
nav > ul li:hover > a,
nav > ul li:active > a {
background-color: #FFE424;
border-top: 4px solid #E5C000;
border-right: 4px solid #FFE424;
border-bottom: 4px solid #FFE424;
border-left: 4px solid #E5C000;
border-radius: 0;
}
nav > ul li:first-child a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */
/*-------------------------------------------------------------------------*/
nav li > ul li {
display: block;
width: 99%;
}
nav li > ul {
display: none;
width: inherit;
}
nav li > ul li:first-child a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li:hover > ul {
display: block;
}
nav li:hover > ul {
position: absolute;
display: block;
}
/* ^NAVIGATION BAR - LEVEL 2 */
/*-------------------------------------------------------------------------*/
table tr#firstrow td{
background-color: #eee;
color: #8B4513;
font-weight: bold;
}
table{
width: 80%;
margin: 20px 0.5%;
font-family: Arial;
font-size: 1.12em;
margin: auto;
clear: both;
table-layout: fixed;
}
table tr td{
text-decoration: none;
color: white;
}
table tbody tr:nth-child(2n) td {
background: #CA240C;
}
table tbody tr:nth-child(2n+1) td {
background: #FF7159;
}
table tr td{
padding: 0.75%;
margin: 0 auto;
}
table tr td#kitchenfirstcolumn{
width: 30%;
}
table tr td#kitchenothercolumns{
width: 70%;
}
table tr td#farmfirstcolumn{
width: 18%;
}
table tr td#farmsecondcolumn{
width: 20%;
}
table tr td#farmothercolumns{
width: 62%;
}
/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/
img{
max-width:100%;
max-height: 100%;
padding: 3%;
}
/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/
h1{
font-size: 1.5em;
font-family: Palatinos, cursive;
}
h2{
font-size: 3em;
font-family: Palatinos, cursive;
text-align: center;
}
/*-------------------------------------------------------------------------*/
将 z-index: 3 添加到 css 中的 #header，我猜它会按预期工作：
#header {
position: fixed;
width: 100%;
top: 0;
height: 15em;
background-color: #254117;
z-index: 3;
}