1
我想为每张照片做一个自动图片幻灯片，下方有点。我不知道如何使用javascript，只是html/css，所以我在网上找到了这段代码，但我无法将幻灯片滚动显示在我的固定标题后面。有什么建议么？如果有人知道如何让点点击自动改变图片，那也会很棒！基本上，我希望我的幻灯片放映像http://www.eatchronictacos.com上的幻灯片，当在鼠标上方悬停时减去图像预览。谢谢你们如何让我的照片幻灯片留在我的标题后面
这里是一个codepen：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> [email protected] </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行。谢谢！我知道是否有人知道如何让点击可点击只是要求他们为我完成这项工作，但这是一个简单的补充还是太多的问题？哈哈 – nrojina0