スライドJavaScriptコード

17856 ワード

  • html
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
       
        <!-- code for using fontawesome icon -->
        <script src="https://kit.fontawesome.com/ebe0a50799.js" crossorigin="anonymous"></script>
    <!-- css -->
    <link rel="stylesheet" href="style.css">
    <!-- javascript -->
        <title>Document</title>
    </head>
    <body>
        <div class="wrapper">
           
            <a class="prev-btn" onclick="moveSlides(-1)"> <i class="fas fa-caret-left fa-2x"></i></a>
    
            <div class="slides-container">
                <div class="slide-image">
                    <img src="img/nonage.PNG" alt="">
                </div>
    
                <div class="slide-image">
                    <img src="img/nonage2.PNG" alt="">
                </div>
    
                <div class="slide-image">
                    <img src="img/nonage3.PNG" alt="">
                </div>
    
            </div>
    
    
                <a class="next-btn" onclick="moveSlides(1)"><i class="fas fa-caret-right fa-2x"></i></a>
    
                <div class="navigation-dots">
                <div class="single-dot"  onclick="currentSlide(0)"></div>
                <div class="single-dot active"  onclick="currentSlide(1)"></div>
                <div class="single-dot"  onclick="currentSlide(2)"></div>
            </div>
          </div>
        
    <script src="script.js" defer></script>
    </body>
    </html>
  • css
  • body{
        margin:0;
        box-sizing:border-box;
        background-color: #222;
    
    }
    .wrapper{
        width:100%;
    
    }
    .slides-container{
        height:500px;
        position: relative;
    }
    .slide-image{
        width: 100%;
        height: 100%;
        position:absolute;
    }
    
    .slide-image img{
        width: 100%;
        height:100%;
        object-fit:cover;
    }
    
    .next-btn, .prev-btn{
        background-color: rgb(212, 198, 198);
        padding:16px;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        z-index:100;
        cursor: pointer;
        transition:400ms;
        font-size: 20px;
    
    
    }
    .next-btn:hover, .prev-btn:hover{
        background-color: hotpink;
    
    }
    
    .next-btn{
        right: 0;
       
    }
    
    .prev-btn{
        left: 0;
    }
    
    .navigation-dots{
        display:flex;
        z-index:100;
        height:32px;
        align-items: center;
        justify-content: center;
        margin:16px 0;
    }
    
    .single-dot{
        background-color: darkcyan;
        height: 16px;
        width: 16px;
        border:2px solid;
        border-radius: 50%;
        cursor: pointer;
        transition:400ms;
        margin: 0 8px;
        z-index:100;
        display: flex;
    }
    
    .single-dot.active {
        background-color: white;
    }
  • js
  • var slideIndex = 0; //slide index
    
    // HTML 로드가 끝난 후 동작
    window.onload=function(){
      showSlides(slideIndex);
    
      // Auto Move Slide
      var sec = 3000;
      setInterval(function(){
        slideIndex++;
        showSlides(slideIndex);
    
      }, sec);
    }
    
    
    // Next/previous controls
    function moveSlides(n) {
      slideIndex = slideIndex + n
      showSlides(slideIndex);
    }
    
    // Thumbnail image controls
    function currentSlide(n) {
      slideIndex = n;
      showSlides(slideIndex);
    }
    
    function showSlides(n) {
    
      var slides = document.getElementsByClassName("slide-image");
      var dots = document.getElementsByClassName("single-dot");
      var size = slides.length;
    
      if ((n+1) > size) {
        slideIndex = 0; n = 0;
      }else if (n < 0) {
        slideIndex = (size-1);
        n = (size-1);
      }
    
      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[n].style.display = "block";
      dots[n].className += " active";
    }
    
    結果

    コードソース
    https://myhappyman.tistory.com/13