자 바스 크 립 트 라운드 맵 효과 구현

요청:
  • 마 우 스 는 라운드 맵 모듈 을 거 쳐 좌우 단 추 를 누 르 면 왼쪽 과 오른쪽 단 추 를 숨 깁 니 다
  • 4.567917.오른쪽 단 추 를 한 번 클릭 하고 그림 을 왼쪽으로 한 장 재생 합 니 다.이런 식 으로 유추 하면 왼쪽 단 추 는 똑 같 습 니 다그림 재생 과 동시에 아래 의 작은 동그라미 모듈 이 함께 변화 합 니 다
  • 작은 원 을 클릭 하면 해당 사진 을 재생 할 수 있 습 니 다
  • 마 우 스 는 라운드 맵 을 거치 지 않 고 라운드 맵 도 자동 으로 그림 을 재생 합 니 다마우스 경과,라운드 맵 모듈,자동 재생 정지
    코드 구현:
    autoplay.html(html 파일 로 복사 하고 저장 합 니 다.열 면 보 이 는 효과):
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/autoPlay.css" rel="external nofollow" >
      <script src="https://blog-static.cnblogs.com/files/jacklzx/animate.js"></script>
      <script src="https://blog-static.cnblogs.com/files/jacklzx/autoPlay.js"></script>
    </head>
    
    <body>
      <div class="focus">
        <!--      -->
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-l">&lt;</a>
        <!--      -->
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow-r">&gt;</a>
        <!--      -->
        <ul>
          <li>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1wlt.jpg" alt=""></a>
          </li>
          <li>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W3nHS.jpg" alt=""></a>
          </li>
          <li>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0Wtrmq.jpg" alt=""></a>
          </li>
          <li>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="https://s1.ax1x.com/2020/10/12/0W1NYd.jpg" alt=""></a>
          </li>
        </ul>
        <!--     -->
        <ol class="circle">
        </ol>
      </div>
    </body>
    
    </html>
    
    autoPlay.css:
    
    li {
      list-style: none;
    }
    
    a {
      text-decoration: none;
    }
    
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      background-color: #00e1ff;
    }
    
    .focus {
      overflow: hidden;
      position: relative;
      width: 721px;
      height: 455px;
      margin: 100px auto;
      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
      border-radius: 40px;
    }
    
    .focus ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 600%;
    }
    
    .focus ul li {
      float: left;
    }
    
    .arrow-l {
      display: none;
      position: absolute;
      top: 50%;
      left: -12px;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      background: rgba(0, 0, 0, .3);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
      border-radius: 0 50% 50% 0;
      z-index: 999;
    }
    
    .arrow-r {
      display: none;
      position: absolute;
      top: 50%;
      right: -12px;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      background: rgba(0, 0, 0, .3);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
      border-radius: 50% 0 0 50%;
      z-index: 999;
    }
    
    .circle {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .circle li {
      float: left;
      width: 12px;
      height: 12px;
      border: 2px solid rgba(255, 255, 255, .5);
      margin: 0 4px;
      border-radius: 50%;
      cursor: pointer;
    }
    
    .current {
      background-color: #fff;
      box-shadow: 0 0 10px #fff;
    }
    
    autoPlay.js:
    
    window.addEventListener('load', function() {
      //     
      var arrow_l = document.querySelector('.arrow-l');
      var arrow_r = document.querySelector('.arrow-r');
      var focus = document.querySelector('.focus');
      var focusWidth = focus.offsetWidth;
      //        animate   ,      
      var step = 5;
      //     focus        ,     
      focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null; //      
      });
      //     focus        ,     
      focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function() {
          //         
          arrow_r.click();
        }, 2000);
      });
    
      var ul = focus.querySelector('ul');
      var ol = focus.querySelector('.circle');
      for (var i = 0; i < ul.children.length; i++) {
        //    li
        var li = document.createElement('li');
        //        ,        
        li.setAttribute('index', i);
        // li  ol
        ol.appendChild(li);
        //                      
        li.addEventListener('click', function() {
          for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
          }
          this.className = 'current';
          //      ,    ,    ul
          //   li,        
          var index = this.getAttribute('index');
          //     li  ,   index num,    
          num = index;
          //     li  ,   index circle,    
          circle = index;
          animate(ul, -index * focusWidth, step);
        });
      }
      // ol    li      current
      ol.children[0].className = 'current';
      var num = 0;
      // circle        
      var circle = 0;
      //        li,  ul   
      //            
      var first = ul.children[0].cloneNode(true);
      ul.appendChild(first);
      //       ,    
      arrow_r.addEventListener('click', function() {
        //           ,ul     :left  0
        if (num == ul.children.length - 1) {
          ul.style.left = 0;
          num = 0;
        }
        num++;
        animate(ul, -num * focusWidth, step);
        // circle        
        circle++;
        circle = circle == ol.children.length ? 0 : circle;
        circleChange();
      });
    
      //       ,    
      arrow_l.addEventListener('click', function() {
        if (num == 0) {
          num = ul.children.length - 1;
          ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth, step);
        // circle        
        circle--;
        circle = circle < 0 ? (ol.children.length - 1) : circle;
        circleChange();
      });
    
      //        
      function circleChange() {
        //     
        for (var i = 0; i < ol.children.length; i++) {
          ol.children[i].className = '';
        }
        //     
        ol.children[circle].className = 'current';
      }
    
      //       
      var timer = setInterval(function() {
        //         
        arrow_r.click();
      }, 2000);
    });
    
    animate.js:
    
    function animate(obj, target, time, callback) {
      //          ,             
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
        //            ,      
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
          clearInterval(obj.timer);
          //              
          callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
      }, time);
    }
    

    이상 은 자 바스 크 립 트 가 라운드 맵 효 과 를 실현 하 는 상세 한 내용 입 니 다.자 바스 크 립 트 라운드 맵 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 해 주 십시오!

    좋은 웹페이지 즐겨찾기