Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

html - main tag completely ignores third child element of the <div class="options">

0 votes
3.5k views
in Technique[技术] by (71.8m points)

html - main tag completely ignores third child element of the <div class="options"> 

var bannerStatus = 1;
var bannerTimer = 3000;

window.onload = function() {
  bannerLoop();
}

var startBannerLoop = setInterval(function() {
  bannerLoop();
}, bannerTimer);

document.getElementById("main-banner").onmouseenter = function() {
  clearInterval(startBannerLoop);
}

document.getElementById("main-banner").onmouseleave = function() {
  startBannerLoop = setInterval(function() {
    bannerLoop();
  }, bannerTimer);
}

document.getElementById("imgbanbtn-prev").onclick = function() {
  if (bannerStatus === 1) {
    bannerStatus = 2;
  } else if (bannerStatus === 2) {
    bannerStatus = 3;
  } else if (bannerStatus === 3) {
    bannerStatus = 1;
  }
  bannerLoop();
};

document.getElementById("imgbanbtn-next").onclick = function() {
  bannerLoop();
};

function bannerLoop() {
  if (bannerStatus === 1) {
    document.getElementById("img-ban2").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("img-ban1").style.right = "0px";
      document.getElementById("img-ban1").style.zIndex = "1000";
      document.getElementById("img-ban2").style.right = "-1200px";
      document.getElementById("img-ban2").style.zIndex = "1500";
      document.getElementById("img-ban3").style.right = "1200px";
      document.getElementById("img-ban3").style.zIndex = "500";
    }, 500);

    setTimeout(function() {
      document.getElementById("img-ban2").style.opacity = "1";
    }, 1000);

    bannerStatus = 2;
  } else if (bannerStatus === 2) {
    document.getElementById("img-ban3").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("img-ban2").style.right = "0px";
      document.getElementById("img-ban2").style.zIndex = "1000";
      document.getElementById("img-ban3").style.right = "-1200px";
      document.getElementById("img-ban3").style.zIndex = "1500";
      document.getElementById("img-ban1").style.right = "1200px";
      document.getElementById("img-ban1").style.zIndex = "500";
    }, 500);

    setTimeout(function() {
      document.getElementById("img-ban3").style.opacity = "1";
    }, 1000);

    bannerStatus = 3;
  } else if (bannerStatus === 3) {
    document.getElementById("img-ban1").style.opacity = "0";
    setTimeout(function() {
      document.getElementById("img-ban3").style.right = "0px";
      document.getElementById("img-ban3").style.zIndex = "1000";
      document.getElementById("img-ban1").style.right = "-1200px";
      document.getElementById("img-ban1").style.zIndex = "1500";
      document.getElementById("img-ban2").style.right = "1200px";
      document.getElementById("img-ban2").style.zIndex = "500";
    }, 500);

    setTimeout(function() {
      document.getElementById("img-ban1").style.opacity = "1";
    }, 1000);

    bannerStatus = 1;
  }
}
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 1em;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
}

header {
  background-color: white;
  grid-column: 1 / 5;
  box-shadow: 3px 3px 8px darkgrey;
  width: 100%;
  position: fixed;
  z-index: 9999999;
}

nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  padding: calc(1rem / 1.618);
}

.logo {
  flex: 1 1 70%;
  max-width: 70%;
  overflow: hidden;
  width: 100%;
}

.logo img {
  width: 20%;
}

nav .btn {
  background-color: blue;
  padding: 1.1% 1.2%;
  color: white;
  cursor: pointer;
  border: 0 none;
}

nav .open {
  display: block !important;
  transition: .5s ease;
}

nav .navbar-collapse {
  flex: 1 1 100%;
  max-width: 100%;
  display: none;
}

nav .navbar-collapse .navbar-nav,
nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu {
  display: none;
}

nav .navbar-collapse .navbar-nav .nav-item {}

nav .navbar-collapse .navbar-nav .nav-item .nav-link,
nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item .dropdown-link {
  padding: calc(1em / 1.618);
  display: block;
  overflow: hidden;
  text-decoration: none;
}

nav .navbar-collapse .navbar-nav .nav-item .nav-link {
  color: red;
}

nav .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
  background-color: red;
  color: white;
}

nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item .dropdown-link {
  color: black;
}

nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item .dropdown-link:hover {
  background-color: #AAAA;
  color: white;
}

nav .navbar-collapse .navbar-nav .nav-item.dropdown {}

nav .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle {}

nav .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle:after {
  font-family: FontAwesome;
  content: "f0d7";
  margin-left: 1rem;
}

nav .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {}

main {
  grid-column: 1 / 5;
  background-color: grey;
  margin-top: 15%;
  margin-left: .8%;
  margin-right: .8%;
}

.main-banner {
  margin: 2% auto;
  width: 90%;
  height: 20%;
  background-color: black;
  position: relative;
  overflow: hidden;
}

.main-banner .img-ban {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  transition: all ease-in-out 500ms;
}

.main-banner #img-ban3 {
  background-image: url("3d-grids.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-banner #img-ban2 {
  background-image: url("black.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-banner #img-ban1 {
  background-image: url("starWars.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.imgban-btn {
  background-color: grey;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  width: 6%;
  height: 24px;
  transform: translateY(-50%);
  z-index: 2000;
  opacity: 0.8;
  cursor: pointer;
}

.imgban-btn:hover {
  opacity: .9;
}

.imgbanbtn-prev {
  left: 1%;
  background-image: url("back-arrow.png");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

.imgbanbtn-next {
  right: 1%;
  background-image: url("next-arrow.png");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

.imgban-box {}

.main-banner .imgban-box h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  color: #fff;
}

.main-banner .imgban-box p {
  padding-top: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8rem;
  color: #fff;
}

.main-banner #img-ban3 .imgban-box {
  padding-top: 10%;
  text-align: center;
}

.main-banner #img-ban2 .imgban-box {
  padding-top: 15%;
  padding-left: 1%;
  float: right;
  margin-right: 5%;
}

.main-banner #img-ban1 .imgban-box {
  padding-top: 15%;
  padding-left: 1%;
  margin-left: 7%;
  float: left;
}

main .options {
  width: 100%;
  margin: auto;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  padding: 1.3%;
}

main .options .service {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: inline-block;
  padding: 2%;
  background-color: #f5f6fa;
  width: 80%;
  margin: 5% auto;
  height: 200px;
  border-radius: 2%;
  box-shadow: 5px 5px 8px black;
  transition: all 200ms ease-out;
}

footer {
  grid-column: 1 / 5;
  margin-top: 10%;
  padding: 1.3% 0;
  background-color: black;
  color: white;
}

footer ul {
  list-style: none;
  text-align: center;
}

footer ul li {
  display: inline;
  padding: 1% 1%;
}

@media screen and (min-width: 520px) {
  .main-banner {
    height: 30%;
  }
}

@media screen and (min-width: 1350px) {
  .main-banner {
    width: 80%;
  }
}

@media screen and (min-width: 1530px) {
  .main-banner {
    width: 1200px;
  }
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/cb3417b510.js" crossorigin="anonymous"></script>

<div class="container">
  <header>
    <nav>
      <a href="index.html" class="logo">
        <img src="logo.png" alt="M-TECH">
      </a>
      <button class="btn" type="button" data-target="#navigation">
                    <i class="fas fa-bars"></i>
                </button>
      <div class="collapse navbar-collapse" id="navigation">
        <ul class="navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link">Item 1</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Item 2</a></li>
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle">Dropdown menu</a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a href="#" class="dropdown-link">Dropdown item 1</a></li>
              <li class="dropdown-item"><a href="#" class="dropdown-link">Dropdown item 2</a></li>
              <li class="dropdown-item"><a href="#" class="dropdown-link">Dropdown item 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a href="#" class="nav-link">Item 4</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Item 5</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <main>
    <div class="main-banner" id="main-banner">
      <div class="imgban-btn imgbanbtn-prev" id="imgbanbtn-prev"></div>
      <div class="img-ban" id="img-ban3">
        <div class="imgban-box">
          <h2>3D Grids</h2>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
        </div>
      </div>
      <div class="img-ban" id="img-ban2">
        <div class="imgban-box">
          <h2>Black</h2>
          <p>Darkness Awaits</p>
        </div>
      </div>
      <div class="img-ban" id="img-ban1">
        <div class="imgban-box">
          <h2>Star Wars</h2>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
        </div>
      </div>
      <div class="imgban-btn imgbanbtn-next" id="imgbanbtn-next"></div>
    </div>
    <div class="options">
      <div class="service">
        <h2>Tire alignment</h2>
        <p>$30.99</p>
      </div>
      <div class="service">
        <h2>Oil change</h2>
        <p>$12.99</p>
      </div>
      <div class="service">
        <h2>Car wash</h2>
        <p>$5.99 - basic</p>
        <p>$8.99 - premium</p>
        <p>$12.99 - gold</p>
      </div>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share

Just Browsing Browsing

2.1m questions

2.1m answers

62 comments

56.5k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...