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

标签 javascript html css

非常感谢您的提前帮助。我几天前开始编码，我的 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/

上一篇：javascript - 在用户第一次访问时强制 Service Worker 更新，而不是用户第二次访问

下一篇：HTML 和 CSS 页脚

相关文章：

php - 如何摆脱 PHP Mysql Ajax 中的转义字符

html - 连续html中的一些行

javascript - 页面重叠在页脚 div 上

javascript - Foundation 6 顶部栏菜单，如 Airbnb

javascript - 自动调整高度 CSS

javascript - 如果 JavaScript 条件为 true，则执行 PHP 脚本

java - 作为 Java 控件的 HTML 呈现引擎

html - 我怎样才能实现下一个颜色重叠我的页脚？

css - 3D CSS + float 元素 - float 在 3D 转换之上

jquery - 在 IE 中使用 jquery 的下拉导航菜单问题

©2024 IT工具网  联系我们