이미지 자동슬라이드 2개 만들기 질문입니다!

이미지 자동슬라이드 2개 만들기 질문입니다!

QA

이미지 자동슬라이드 2개 만들기 질문입니다!

본문

현재 코드를 이용해서 한 페이지안에 2개 이상의 자동 이미지 슬라이드를 만들려고하는데,

중복이라서 그런지... 안됩니다만.. 어떻게하면 될까요? 현재는 슬라이드 하나만의 코드입니다

 

 

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="new.css">
<style>
  * {box-sizing: border-box;}
  body {font-family: Verdana, sans-serif;}
  .mySlides {display: none;}
  img {vertical-align: middle;}
  .main{
    margin-top:40px;
    text-align:center;
    font-size:1.7em
  }

  .wear{
    margin-top:2em;
    text-align: center;
    font-size:30px;
  }

  .nav1{
    text-align: center;
    font-family: 'Hepta Slab', serif;
    font-weight: 300;
    word-spacing: 5em;
    color:black;
    text-decoration:none;

  }
  /* Slideshow container */
  .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    text-align:center;
  }
  .slideshow-container2 {
    max-width: 1000px;
    position: relative;
    margin: auto;
    text-align:center;
  }

  /* Caption text */
  .text {
    color: #000000;
    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: 15px;
    width: 15px;
    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>
  <div class="main">
    <h3>Brand<h3>
  </div>
  <div class="nav1">
  <a href="#" style="text-decoration:none;">B</a>
  <a href="#" style="text-decoration:none;">JavaScript</a>
  <a href="#" style="text-decoration:none;">jQuery</a>
</div>
<div class="wear">
Wear
</div>
  <div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext"></div>
    <img src="496458_X9I07_4696_001_100_0000_Light-GG.jpg" style="width: 500px; height: 450px;">
  </div>
  <div class="mySlides fade">
    <div class="numbertext"></div>
    <img src="menclp-03-01-img_pre-fall-101019-mob.jpg" style="width: 500px; height: 450px;">
  </div>
  <div class="mySlides fade">
    <div class="numbertext"></div>
    <img src="ah8262l-2cq-sub1.20190731095031547823.smn.jpg" style="width: 500px; height: 450px;">
  </div>
  </div>
  <br>

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


<script type="text/javascript">
  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, 2900); // Change image every 2 seconds
}

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

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 1,096
QA 내용 검색
filter #html ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT