幻灯片放映后的空白

时间：2017-04-06 11:56:34

标签： javascript html css html5

我制作了幻灯片，但我无法删除图像后的空白区域

请帮助，我尝试了一切，但都是徒劳的。起初我以为这是一个保证金，但我找不到任何保证金。幻灯片容器是绝对的，就像之前在另一个滑块上一样，为什么呢？

＆＃13;
＆＃13; 
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, 6000); // Change image every 2 seconds
}
＆＃13; 
@media screen and (max-width: 900px) {
body {
overflow: scroll;
}
}

body {
  background-color: white;
  background-attachment: fixed;
  font-family: 'Open Sans', serif;
  color: white;
}

#container {
  height: 1000px;
}


/* HEADER WITH NAV BAR AND LOGIN SNIPPET */

#head {
  position: absolute;
  height: 150px;
  width: 100%;
  background-color: #ffffff;
  right: 0px;
  left: 0px;
  top: 0px;
}

#logo-image {
  position: relative;
  margin-top: 40px;
  margin-left: 40px;
}

#logo-image:hover {
  -webkit-animation: blur 0.5s ease-in;
}

@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  50% {
    -webkit-filter: blur(1px);
    filter: blur(2px);
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
}

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

.navigationmenu-main {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
}

.navigationmenu-parent {
  float: left;
}

.navigationmenu-child {
  display: inline-block;
  color: white;
  width: 50px;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  background-color: #333;
  -webkit-transition: background-color .3s;
}

.navigationmenu-child:hover {
  background-color: #111;
}

.navigationmenu-child:hover + .navigationmenu-line {
  width: 100%;
}

.navigationmenu-line {
  height: 3px;
  background-color: red;
  width: 0%;
  -webkit-transition: width .3s;
  -webkit-transition-timing-function: ease;
}

.login-parent {
  float: right;
  cursor: pointer;
}

.login-child {
  display: inline-block;
  color: white;
  width: auto;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  background-color: #333;
  -webkit-transition: background-color .3s;
}

.login-child:hover {
  background-color: #111;
}

.login-child:hover + .navigationmenu-line {
  width: 100%;
}

#loginbox {
  display: block;
  visibility: hidden;
  position: absolute;
  width: 300px;
  top: 136px;
  right: 90px;
  z-index: 999;
  background: #4c4c4c;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  padding: 15px;
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 1);
  border-radius: 3px 0 3px 3px;
  -webkit-transition: padding .3s;
}

.login-parent:hover #loginbox {
  visibility: visible;
}

#loginform {
  padding: 5px;
}

#loginelement {
  padding: 5px;
}


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


/* MAIN BODY */

#main {
  position: relative;
  height: 100%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  top: 0px;
  bottom: 100px;
}

#box {
  position: relative;
  height: 100%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(255, 255, 255, 0.4);
  top: 140px;
  bottom: 100px;
  box-shadow: 4px 4px 3px 1px rgba(0, 0, 0, 0.4);
}


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


/* SLIDER */
/* Slideshow container */
.slideshow-container {
  position: absolute;
  width: 1500px;
  left: 0px;
  margin-top: 128px;
  background-size: cover;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* 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: 0.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/*
.slide1 {
  position: absolute;
  width: 100%;
  height: 800px;
  background-size: cover;
  animation: fade 36s infinite;
  -webkit-animation: fade 36s infinite;
}

@keyframes fade {
  0% {
    background: url("1.jpg") no-repeat center;
  }
  20% {
    background: url("1.jpg") no-repeat center;
  }
  33.333% {
    background: url("2.jpg") no-repeat center;
  }
  50% {
    background: url("2.jpg") no-repeat center;
  }
  66.666% {
    background: url("3.jpg") no-repeat center;
  }
  80% {
    background: url("3.jpg") no-repeat center;
  }
  100% {
    background: url("1.jpg") no-repeat center;
  }
}*/

.button {
  cursor: pointer;
  position: relative;
  font-size: 48px;
  color: rgba(0, 0, 0, 0.5);
  top: 250px;
  display: inline-block;
}

#rightarrow {
  float: right;
}
.floattext {
	position: relative;
	top: 800px;
	width: 800px;
	background:transparent;
	z-index: 999;
	left: 350px;	
	animation: fadein 4s ease forwards;
}
@keyframes fadein	{
  0% {
    top: 800px;
    opacity: 0;
  }
  100% {
    top: 500px;
    opacity: 1;
  }
}
/*-----------------*/


/* FOOT AREA FIXED */

#foot {
  position: fixed;
  height: 70px;
  width: 100%;
  background-color: #333;
  right: 0px;
  left: 0px;
  bottom: 0px;
  z-index: 9999;
}
＆＃13; 
<!DOCTYPE html>

<html>
<head>
	<title>Le Meridian | A home away from home</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	
</head>

<body>
	<div id="container">
		<div id="head">
			<img height="20%" id="logo-image" src="logo.png" width="20%">

			<ul class="navigationmenu-main" id="nav_bar">
				<li class="navigationmenu-parent">
					<a class="navigationmenu-child" href="">A</a>

					<div class="navigationmenu-line">
					</div>
				</li>


				<li class="navigationmenu-parent">
					<a class="navigationmenu-child" href="">B</a>

					<div class="navigationmenu-line">
					</div>
				</li>


				<li class="navigationmenu-parent">
					<a class="navigationmenu-child" href="">C</a>

					<div class="navigationmenu-line">
					</div>
				</li>


				<li class="navigationmenu-parent">
					<a class="navigationmenu-child" href="">D</a>

					<div class="navigationmenu-line">
					</div>
				</li>


				<li class="navigationmenu-parent">
					<a class="navigationmenu-child" href="">E</a>

					<div class="navigationmenu-line">
					</div>
				</li>


				<li class="navigationmenu-parent">
					<a class="navigationmenu-child" href="">F</a>

					<div class="navigationmenu-line">
					</div>
				</li>


				<li class="navigationmenu-parent">
					<a class="navigationmenu-child" href="">G</a>

					<div class="navigationmenu-line">
					</div>
				</li>


				<li class="login-parent">
					<div class="login-child">
						<a href="Sign Up.html" style="color: inherit; text-decoration: none; "> Sign Up</a>
					</div>


					<div class="navigationmenu-line">
					</div>
				</li>


				<li class="login-parent">
					<div class="login-child" id="trigger">
						Login &#x25BC
					</div>


					<div class="navigationmenu-line">
					</div>


					<div id="loginbox">
						<form id="loginform" name="loginform">
							<center>
								Login Form<br>
								<br>
								<input id="loginelement" name="email" placeholder="UserId / email" type="email"><br>
								<br>
								<input id="loginelement" name="password" placeholder="Password" type="password"><br>
								<br>
								<input id="loginelement" name="loginsubmit" type="submit"> <input id="loginelement" name="loggedin" type="checkbox"> Stay Signed In
							</center>
						</form>
					</div>
				</li>
			</ul>
		</div>


		<!--div class='slider'>
			<div class='slide1'>
				<div class="button">
					&#x25C0
				</div>


				<div class="button" id="rightarrow">
					&#x25B6
				</div>
			</div>
		</div-->
		<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="1.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="2.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="3.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>


		<div class="floattext">
			<font size="7"></font>

			<center>
				<font size="7">A home away from home<br>
				Book now</font>
			</center>
			<font size="7"></font>
		</div>


		<div id="foot">
			<p align="center">Windsor Place, New Delhi, New Delhi, 110001, India</p>
		</div>
	</div>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您的代码中几乎没有问题。

  

问题1 - .text班的宽度超过了我修复过的窗口。

     

问题2 - slider-container类的宽度是固定的    1500px ，我已改为 100％。

下面是没有空格的工作代码。 

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, 6000); // Change image every 2 seconds
}
@media screen and (max-width: 900px) {
  body {
    overflow: scroll;
  }
}

body {
  background-color: white;
  background-attachment: fixed;
  font-family: 'Open Sans', serif;
  color: white;
  margin: 0px;
  padding: 0px;
}

#container {
  height: 1000px;
}


/* HEADER WITH NAV BAR AND LOGIN SNIPPET */

#head {
  position: absolute;
  height: 150px;
  width: 100%;
  background-color: #ffffff;
  right: 0px;
  left: 0px;
  top: 0px;
}

#logo-image {
  position: relative;
  margin-top: 40px;
  margin-left: 40px;
}

#logo-image:hover {
  -webkit-animation: blur 0.5s ease-in;
}

@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  50% {
    -webkit-filter: blur(1px);
    filter: blur(2px);
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
}

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

.navigationmenu-main {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
}

.navigationmenu-parent {
  float: left;
}

.navigationmenu-child {
  display: inline-block;
  color: white;
  width: 50px;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  background-color: #333;
  -webkit-transition: background-color .3s;
}

.navigationmenu-child:hover {
  background-color: #111;
}

.navigationmenu-child:hover+.navigationmenu-line {
  width: 100%;
}

.navigationmenu-line {
  height: 3px;
  background-color: red;
  width: 0%;
  -webkit-transition: width .3s;
  -webkit-transition-timing-function: ease;
}

.login-parent {
  float: right;
  cursor: pointer;
}

.login-child {
  display: inline-block;
  color: white;
  width: auto;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  background-color: #333;
  -webkit-transition: background-color .3s;
}

.login-child:hover {
  background-color: #111;
}

.login-child:hover+.navigationmenu-line {
  width: 100%;
}

#loginbox {
  display: block;
  visibility: hidden;
  position: absolute;
  width: 300px;
  top: 136px;
  right: 90px;
  z-index: 999;
  background: #4c4c4c;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  padding: 15px;
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 1);
  border-radius: 3px 0 3px 3px;
  -webkit-transition: padding .3s;
}

.login-parent:hover #loginbox {
  visibility: visible;
}

#loginform {
  padding: 5px;
}

#loginelement {
  padding: 5px;
}


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


/* MAIN BODY */

#main {
  position: relative;
  height: 100%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  top: 0px;
  bottom: 100px;
}

#box {
  position: relative;
  height: 100%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(255, 255, 255, 0.4);
  top: 140px;
  bottom: 100px;
  box-shadow: 4px 4px 3px 1px rgba(0, 0, 0, 0.4);
}


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


/* SLIDER */


/* Slideshow container */

.slideshow-container {
  position: absolute;
  /*width: 1500px;*/
  width: 100%;
  left: 0px;
  margin-top: 128px;
  background-size: cover;
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
 
  text-align: center;
  /*width:100%; */
  width:calc(100%-24px);
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* 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: 0.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/*
.slide1 {
  position: absolute;
  width: 100%;
  height: 800px;
  background-size: cover;
  animation: fade 36s infinite;
  -webkit-animation: fade 36s infinite;
}

@keyframes fade {
  0% {
    background: url("1.jpg") no-repeat center;
  }
  20% {
    background: url("1.jpg") no-repeat center;
  }
  33.333% {
    background: url("2.jpg") no-repeat center;
  }
  50% {
    background: url("2.jpg") no-repeat center;
  }
  66.666% {
    background: url("3.jpg") no-repeat center;
  }
  80% {
    background: url("3.jpg") no-repeat center;
  }
  100% {
    background: url("1.jpg") no-repeat center;
  }
}*/

.button {
  cursor: pointer;
  position: relative;
  font-size: 48px;
  color: rgba(0, 0, 0, 0.5);
  top: 250px;
  display: inline-block;
}

#rightarrow {
  float: right;
}

.floattext {
  position: relative;
  top: 800px;
  width: 800px;
  background: transparent;
  z-index: 999;
  left: 350px;
  animation: fadein 4s ease forwards;
}

@keyframes fadein {
  0% {
    top: 800px;
    opacity: 0;
  }
  100% {
    top: 500px;
    opacity: 1;
  }
}


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


/* FOOT AREA FIXED */

#foot {
  position: fixed;
  height: 70px;
  width: 100%;
  background-color: #333;
  right: 0px;
  left: 0px;
  bottom: 0px;
  z-index: 9999;
}
<!DOCTYPE html>

<html>

<head>
  <title>Le Meridian | A home away from home</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

</head>

<body>
  <div id="container">
    <div id="head">
      <img height="20%" id="logo-image" src="logo.png" width="20%">

      <ul class="navigationmenu-main" id="nav_bar">
        <li class="navigationmenu-parent">
          <a class="navigationmenu-child" href="">A</a>

          <div class="navigationmenu-line">
          </div>
        </li>


        <li class="navigationmenu-parent">
          <a class="navigationmenu-child" href="">B</a>

          <div class="navigationmenu-line">
          </div>
        </li>


        <li class="navigationmenu-parent">
          <a class="navigationmenu-child" href="">C</a>

          <div class="navigationmenu-line">
          </div>
        </li>


        <li class="navigationmenu-parent">
          <a class="navigationmenu-child" href="">D</a>

          <div class="navigationmenu-line">
          </div>
        </li>


        <li class="navigationmenu-parent">
          <a class="navigationmenu-child" href="">E</a>

          <div class="navigationmenu-line">
          </div>
        </li>


        <li class="navigationmenu-parent">
          <a class="navigationmenu-child" href="">F</a>

          <div class="navigationmenu-line">
          </div>
        </li>


        <li class="navigationmenu-parent">
          <a class="navigationmenu-child" href="">G</a>

          <div class="navigationmenu-line">
          </div>
        </li>


        <li class="login-parent">
          <div class="login-child">
            <a href="Sign Up.html" style="color: inherit; text-decoration: none; "> Sign Up</a>
          </div>


          <div class="navigationmenu-line">
          </div>
        </li>


        <li class="login-parent">
          <div class="login-child" id="trigger">
            Login &#x25BC
          </div>


          <div class="navigationmenu-line">
          </div>


          <div id="loginbox">
            <form id="loginform" name="loginform">
              <center>
                Login Form<br>
                <br>
                <input id="loginelement" name="email" placeholder="UserId / email" type="email"><br>
                <br>
                <input id="loginelement" name="password" placeholder="Password" type="password"><br>
                <br>
                <input id="loginelement" name="loginsubmit" type="submit"> <input id="loginelement" name="loggedin" type="checkbox"> Stay Signed In
              </center>
            </form>
          </div>
        </li>
      </ul>
    </div>


    <!--div class='slider'>
			<div class='slide1'>
				<div class="button">
					&#x25C0
				</div>


				<div class="button" id="rightarrow">
					&#x25B6
				</div>
			</div>
		</div-->
    <div class="slideshow-container">

      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="https://dummyimage.com/600x400/000/fff" style="width:100%">
        <div class="text">Caption Text</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="https://dummyimage.com/600x400/000/fff" style="width:100%">
        <div class="text">Caption Two</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="https://dummyimage.com/600x400/000/fff" style="width:100%">
        <div class="text">Caption Three</div>
      </div>

    </div>
    <br>

    <div style="text-align:center">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>


    <div class="floattext">
      <font size="7"></font>

      <center>
        <font size="7">A home away from home<br> Book now</font>
      </center>
      <font size="7"></font>
    </div>


    <div id="foot">
      <p align="center">Windsor Place, New Delhi, New Delhi, 110001, India</p>
    </div>
  </div>

</body>

</html>

答案 1 :(得分：-1)

尝试删除HTML

中img标记之前或之后的任何空格
相关问题
最新问题