javascript - 如何让我的图片幻灯片显示在标题后面-6ren

javascript - 如何让我的图片幻灯片显示在标题后面

转载作者：行者123 更新时间：2023-11-28 16:08:14

我想做一个自动图片幻灯片放映，每张图片下面都有点。我根本不知道如何使用 javascript，只是 html/css，所以我在网上找到了这个代码片段，但我无法让幻灯片在我的固定标题后面滚动。有什么建议么？另外，如果有人知道如何使点可点击以自动更改图片，那也太好了!基本上，我希望我的幻灯片像 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;
}

/*-------------------------------------------------------------------------*/

最佳答案

在 css 中将 z-index: 3 添加到 #header，我猜它会按预期工作:

#header {
    position: fixed;
    width: 100%;
    top: 0;
    height: 15em;
    background-color: #254117;
    z-index: 3;
}

关于javascript - 如何让我的图片幻灯片显示在标题后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38774100/

文章推荐： css - 如何创建类似于图像填充效果的 CSS3 动画？

文章推荐： html - 在 Wordpress 中隐藏表格边框

文章推荐： css - 更准确的位置CSS

html - 标题/标题
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏，然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右)，但我不确定这是否可能。我尝试了一
html - Div 标题/标题
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
Android EditText 标题(标题)就像在 android 指南中
我想让每个 EditText 对象都有自己的标题，就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗？我想他们也可能会使用带有部分的 ListView ，但这对
swift - UICollectionView 标题 View 类似于表格 View 标题(不是节标题)
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ？我的意思是整个集合 View 的标题 View ，而不是每个部分的重复 View
android - Material Design 排版 - 标题、标题、间距、文本外观
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html)，但我发现它们
python - 是否有 Python 库来提取视频元数据，例如 [标题、描述、标题/字幕]？
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库，例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。我主要从视频文件中提取的主要数据是 [标题、描
html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left
你好，这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。这是我的问题: 我可以获取内容中心，或者标题 float 在 im
ios - UINavigationBar 后退按钮在某些设备或模拟器上显示 "Back"标题，在其他设备或模拟器上显示之前的 View Controller 标题
我有一个带有导航栏的应用程序，可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时，后退按钮
sql - t-sql 这是如何工作的？ SELECT @MyList = ISNULL(@MyList ,'') + 标题 + ', ' FROM 标题
我遇到了一些非常酷的 t-sql，可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
HTML 标题
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标
每页上的 wkhtmltopdf 标题
我正在使用 wkhtmltopdf 将 html 转换为 pdf。我想在每个页面中添加标题，但它只显示在第一页(目录)中。我使用的命令是 "C:\Program Files\wkhtmltopdf
r - 如何在ggplot2中显示obs的方向(标题)
如何使用 ggplot2 显示观察的方向(标题)？有没有办法调整shape=17 (三角形)以便它“指向”下一次观察？示例代码 library(ggplot2) dat % pivot_wide
macos - 标题&&关闭按钮不显示
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
文本字段上的 JavaScript 标题
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
wordpress - 在Facebook上与视频共享URL不显示描述/标题
我叫麦克。谢谢你的帮助。在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
SAPUI5 - 标题、侧边栏和导航
我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:
go - “标题”注释的目的
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库，需要进行一些更改。我注意到所有的方法，结构等等都有一些奇怪的类似于标题的注释，如下所示: // SomeType ... type Som
java - ListView 标题
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何让我的图片幻灯片显示在标题后面