gpt4 book ai didi

javascript - 你能告诉我如何将图像和文本添加到我的 html 幻灯片吗?

转载 作者:可可西里 更新时间:2023-11-01 15:00:18 25 4
gpt4 key购买 nike

非常感谢您的提前帮助。我几天前开始编码,我的 slider 有问题。我的文本 h1 没有出现在我的 slider 顶部。我尝试了 Z-index,但没有用。图像似乎出现在我的幻灯片旁边而不是上面。我尝试了不同的东西,但它仍然是一样的。图像出现,但在 slider 旁边,或者文本出现在图像下方。

这是我的 html 和我的 css 文件。希望有人能帮我解决/

body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: #484848;
max-width: 100%;
overflow-x: hidden;
}
p {
font-size: 16px;
margin: 0;
padding: 0;
}
a:link {
font-size: 16px;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
margin: 0;
padding: 0;
}
ul,ol{
list-style-type;
}
::selection {
color: #fff;
background-color: #333;
}
::-moz-selection {
color: #fff;
background-color: #333;
}


/*-----------Top-Nav-------- */
.top-nav {
position: fixed;
width: 100%;
border-bottom: 1px solid #c9c9c9;
float: left;
display: block;
height: 95px;
background: #fff;
z-index: 99999999999;
}
.top-nav .logo{
width: 100%;
float: left;
display: block;
height: 95px;
border-right: 1px solid #e9e9e9;
}
.top-nav .logo img {
width: 100%;
padding: 14px 0;
transition: all .9s;
-webkit-filter: grayscale(0%);
}
.top-nav .logo a:hover img {
-webkit-filter: grayscale(100%);
}


/*-----------Top-Nav-Search-------- */
.top-nav .search-container {
float: left;
width:100%;
display:block;
padding:22px 0;
}
.top-nav form{
position:relative;
display:block;
}
.top-nav input[type="text"] {
width: 100%;
background: #fff;
padding: 10px 12px;
border: 1px solid #e1e1e1;
border-right: none;
color: #888;
font-size: 14px;
height:42px;
}
.top-nav .search-container button {
float: right;
padding: 8px 15px;
background: orange;
font-size: 17px;
height: 42px;
border: none;
cursor: pointer;
position: absolute;
right: 0;
color: #fff;
}
.top-nav .search-container button:hover {
background: #ccc;
}



/*-----------Top-Nav-Navigation-------- */
.navigation{
width: auto;
float: right;
display: block;
}
.top-nav ul {
float: right;
padding: 35px 0;
margin: 0;
width: auto;
display: block;
}
.top-nav ul li {
list-style: none;
margin: 0 34px;
display: inline-block;
}
.top-nav ul li a {
color: #777;
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
letter-spacing: .5px;
transition: all .9s;
}
.top-nav ul li a:hover {
color: orange;
}



/*-----------Slideshow----------- */
.slideshow-container {
width: 100%;
position: relative;
margin: auto;
float: left;
display: block;
margin-top: 94px;
}
.slideshow-container .slider-text{
width:100%;
float:left;
display:block;
background:#008080;
height:510px;
}
.slideshow-container .slider-text h1 {
d
color: #fff;
font-weight: 400;
text-align: center;
width: 667px;
display: block;
margin: 130px auto auto;
font-size: 35px;
font-weight: 600;

}
.slideshow-container .slider-text p {
color: #fff;
font-size: 17px;
text-align: center;
max-width: 700px;
display: block;
margin: 15px auto auto;
font-weight: 400;
letter-spacing: 0.5px;

}
.slideshow-container .prev, .slideshow-container .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 11px 18px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 48px;
height: 48px;
width: 48px;
background: rgba(0,0,0, 0.4);
}
.slideshow-container .next{
right: 16px;
}
.slideshow-container .prev{
left: 16px;
}
.slideshow-container .prev:hover, .slideshow-container .next:hover {
background-color: rgba(0,0,0,1);
text-decoration:none;
}
.slider-image {
display: flex
}



/*-----------Slideshow-dot----------- */
.dot-area{
width:100%;
float:left;
display:block;
padding:20px 0;
background:orange;
}
.dot-area .dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 5px;
background-color: #f9f9f9;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot-area .active, .dot-area .dot:hover {
background-color: #008080;
}
.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
}
}

@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}


/*-----------your-name----------- */
.your-area{
width:100%;
float:left;
display:block;
background:#003333;
}
.your-area h1{
padding:100px 0;
font-size:20px;
color:#fff;
text-align: center;
font-weight:600;
}
.your-area h1 span{
color:white;
font-size:20px;




/*:::::::::::::::::Responsive Media Query:::::::::::::::::::*/

@media only screen and (max-width:1279px){
.top-nav ul li {
margin: 0 20px;
}
}
@media only screen and (max-width:1023px){

}
@media only screen and (max-width:979px){
.top-nav {
height: 70px;
}
.top-nav .logo {
height: 70px;
}
.top-nav .search-container {
padding: 13px 0;
}
.top-nav ul li a {
font-size: 14px;
letter-spacing: 0;
}
.top-nav ul {
padding: 24px 0;
}
.slideshow-container {
margin-top: 68px;
}
.slideshow-container .slider-text h1 {
width: 560px;
font-size: 27px;
}
.slideshow-container .slider-text {
height: 400px;
}
}
@media only screen and (max-width:899px){
.slideshow-container .slider-text p {
max-width: 600px;
}
.top-nav ul li {
margin: 0 15px;
}
.your-area h1 {
font-size: 18px;
}
.your-area h1 span{
font-size: 22px;
}
}
@media only screen and (max-width:799px){

}
@media only screen and (max-width:767px){
.top-nav {
height: auto;
}
.top-nav .logo {
height: auto;
border:0;
}
.top-nav .logo img {
width: 180px;
margin: auto;
display:block;
}
.top-nav .search-container {
padding: 0;
}
.navigation {
float: none;
margin: auto;
}
.top-nav ul {
float: none;
padding: 12px 0;
width: auto;
display: table;
margin: auto;
}
.top-nav input[type="text"] {
height: 38px;
}
.top-nav .search-container button {
height: 38px;
}
.slideshow-container {
margin-top: 170px;
}
.slideshow-container .slider-text h1 {
width: 100%;
padding: 0 90px;
}
.slideshow-container .slider-text p {
max-width: 100%;
padding: 0 90px;
}
}
@media only screen and (max-width:639px){

}
@media only screen and (max-width:599px){
.slideshow-container .slider-text h1 {
margin: 65px auto auto;
}
}
@media only screen and (max-width:479px){
.top-nav ul li {
margin: 0 9px;
}
.slideshow-container .slider-text h1 {
padding: 0 85px;
font-size: 16px;
}
.slideshow-container .slider-text p {
padding: 0 78px;
font-size:12px;
}
.slideshow-container .slider-text {
height: 350px;
}
.slideshow-container .slider-text h1 {
margin: 100px auto auto;
}
.your-area h1 {
font-size: 13px;
}
.your-area h1 span {
font-size: 14px;
}
}
@media only screen and (max-width:359px){
.top-nav ul li {
margin: 0 5px;
}
}
<!DOCTYPE html>
<html>

<head>
<title>ElephantRoom</title>
<meta charset="utf-8" />
<meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
<link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Top-NAV HTML-->
<section class="top-nav">
<div class="col-md-2 col-sm-2 col-xs-12">
<div class="logo">
<a href="index.php"><img src="logo.png" alt="ElephantRoom"/></a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Keywords.." name="search">
<button type="submit">Search</button>
</form>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="navigation">
<ul>
<li><a href="#">Become a Host</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
</ul>
</div>
</div>
</section>
<section class="slideshow-container">
<div class="mySlides fade">
<div class="slider-image">
<img src="image1.jpg" alt="image1"/>

<div class="slider-text">
<h1><span> why book an expensive hotel when you can book a cheap apartment</span></h1>
<p>Lorem ipsum dolor sit amet, consecteur adipiscing
elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
</div>
</div>
</div>
</div>

<div class="mySlides fade">
<div class="slider-text">
<h1>We have you covered anywhere you go in Africa</h1>
<p>Lorem ipsum dolor sit amet, consecteur adipiscing
elit. Donec venenatis bibendum nunc ut convallis. Suspendisse in nunc unterdum quam pellentesque.</p>
</div>
</div>
<div class="mySlides fade">
<div class="slider-text">
<h1> We believe in a world with no frontier</h1>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</section>
<section class="dot-area" style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</section>
<section class="your-area" style="text-align:center">
<h1>Designed by <span>Sangbe Torndou Jean Marc</span></h1>
</section>

<!-- javascript import-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
}

</script>
</body>
</html>

enter image description here

最佳答案

为 h1 使用 css

.slider-text h1 {position:absolute; z-index:9999999}

关于javascript - 你能告诉我如何将图像和文本添加到我的 html 幻灯片吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53222584/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com