js 윤 방도 제작 방법 실현

본 논문 의 사례 는 js 가 윤 방 도 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효 과 는 그림 과 같다.

코드 는 다음 과 같 습 니 다:


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  
  <style type="text/css">
   
   * {
    padding: 0;
    margin: 0;
   }
   .container {
    position: relative;
    width: 600px;
    height: 300px;
    margin:  30px auto;
    overflow: hidden;
   }
       .left {
     display: none;
     position: absolute;
     top: 50%;
     left: -20px;
     transform: translateY(-50%);
     width:50px;
     height: 50px;
     border-top-right-radius: 50%;
     border-bottom-right-radius: 50%;
     background-color: rgba(0,0,0,0.5);
     z-index: 999;
    }
    .left i {
    display: block;
       margin-top: 10px;
    margin-left: 20px;
    width: 30px;
    height: 30px;
    background: url(img/left.png) no-repeat;
    background-size: 30px 30px;
    }
   .right {
    display: none;
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width:50px;
    height: 50px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
   }
   .right i {
     display: block;
     margin-top: 10px;
     margin-right: 20px;
     width: 30px;
     height: 30px;
     background: url(img/right.png) no-repeat;
     background-size: 30px 30px;
    }
   
   ul li,ol li {
    list-style: none;
   }
   .picture {
    position: absolute;
   }
   .list {
    position: absolute;
    bottom: 10px;
    left: 10px;
   }
      .list li {
    float: left;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
   }
   .list .current {
    background-color: #fff;
   }
   .picture li {
    position: absolute;
    width: 600px;
    height: 300px;
   }
   img {
    width: 100%;
    height: 100%;
   }
   
  </style>
 </head>
 <body>
  <div class="container">
   <span class="left"><i></i></span>
   <span class="right"><i></i></span>
   <ul class="picture">
    <li><img src="img/1.jpg" ></li>
    <li><img src="img/2.jpg" ></li>
    <li><img src="img/3.jpg" ></li>
    <li><img src="img/4.jpg" ></li>
    <li><img src="img/5.jpg" ></li>
   </ul>
   <ol class="list">
   </ol>
  </div>
  <script type="text/javascript">
   var picture = document.querySelector('.picture');
   var list = document.querySelector('.list');
   var num=0;
   var circle=0;
   for (i=0;i<picture.children.length;i++)
   {   
    //        
    picture.children[i].style.left = i*600 + 'px';
    //         
    var  li = document.createElement('li');
    li.setAttribute('index',i);
    
    list.appendChild(li);
    //  li      
    li.addEventListener('click',function () {
     for (var i=0;i<list.children.length;i++) {
      list.children[i].className = '';
     }
     this.className = 'current';
     var index = this.getAttribute('index');
     num = index;
     circle = index;
     animate(picture,-index*600);
    })
   }
   //      ol     
   list.children[0].className = 'current';
   var left = document.querySelector('.left');
   var right = document.querySelector('.right');
   var container = document.querySelector('.container');
   //           
   container.addEventListener('mouseover',function () {
    left.style.display = 'block';
    right.style.display = 'block';
    clearInterval(timer)
    timer = null;
   })
   container.addEventListener('mouseleave',function () {
    left.style.display = 'none';
    right.style.display = 'none';
    timer = setInterval(function () {
     right.click();
    },1000);
   })
   
   // js    
   function animate (obj,target,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);
      if (callback) {
       callback();
      }
     }
     obj.style.left = obj.offsetLeft + step  + 'px';
    },15)
   }
   
   var first = picture.children[0].cloneNode(true);
   picture.appendChild(first);
   picture.lastChild.style.left = (picture.children.length-1)*600 + 'px';
   //      
      right.addEventListener('click',function () {
    if (num==picture.children.length-1) {
     picture.style.left = 0;
     num = 0;
    }
    num++;
    animate(picture,-num*600);
    circle ++;
    if (circle == list.children.length) {
     circle = 0;
    }
    
    for (var i = 0;i<list.children.length;i++) {
     list.children[i].className  = '';
    }
    list.children[circle].className  = 'current';
   })
   //       
   left.addEventListener('click',function () {
    if (num==0) {
     picture.style.left = -(picture.children.length-1)*600 +'px';
     num = picture.children.length-1;
    }
    num--;
    animate(picture,-num*600);
    circle --;
    if (circle < 0) {
     circle = list.children.length-1;
    }
    
    for (var i = 0;i<list.children.length;i++) {
     list.children[i].className  = '';
    }
    list.children[circle].className  = 'current';
   })
   
   var timer = setInterval(function () {
    //     
    right.click();
   },1000);
  </script>
 </body>
</html>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this

18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 윤 방도 제작 방법 실현

좋은 웹페이지 즐겨찾기