JS 구현 샤오미 윤방도

5164 단어 js윤파도
원생 JS 모방 샤오미 윤방도(최신판은 알기 쉽습니다), 참고하시기 바랍니다. 구체적인 내용은 다음과 같습니다.
이번 컨텐트의 주요 이점은 다음과 같습니다.
  • 자동 윤파
  • 이전 다음 그림을 클릭하여 전환할 수 있습니다
  • 오른쪽 아래 작은 원을 클릭하여 이미지 전환
  • 코드 섹션:
    H5:
    
    <div class="wrap">
        <ul class="list">
          <li class="item active"><img src="img/001.jpg" alt=""></li>
          <li class="item"><img src="img/002.jpg"" alt=""></li>
          <li class="item"><img src="img/001.jpg" alt=""></li>
          <li class="item"><img src="img/002.jpg" alt=""></li>
          <li class="item"><img src="img/001.jpg" alt=""></li>
        </ul>
        <!--   -->
        <ul class="pointList">
          <li class="point active" data-index="0"></li>
          <li class="point" data-index="1"></li>
          <li class="point"data-index="2"></li>
          <li class="point"data-index="3"></li>
          <li class="point"data-index="4"></li>
        </ul>
        <button type="button" class="btn" id="goPre"><</button>
        <button type="button" class="btn" id="goNext">></button>
    </div>
    CSS 섹션:
    
    <style>
        .wrap {
          width: 800px;
          height: 400px;
          position: relative;
        }
    
        .list {
          width: 800px;
          height: 400px;
          list-style: none;
          position: relative;
          padding-left: 0px;
        }
    
        .item {
          position: absolute;
          width: 100%;
          height: 100%;
          color: white;
          font-size: 50px;
          opacity: 0.6;
          transform: all .8s;
        }
        .item img{
          width: 800px;
          height: 400px;
        }
        .btn {
          width: 50px;
          height: 100px;
          position: absolute;
          top: 150px;
          z-index: 100;
        }
    
        #goPre {
          left: 0px;
        }
    
        #goNext {
          right: 0px;
        }
    
        .item.active {
          opacity: 1;
          z-index: 10;
        }
    
        .pointList{
          padding-left: 0;
          list-style: none;
          position: absolute;
          right: 20px;
          bottom: 20px;
          z-index: 1000;
        }
        .point{
          width: 10px;
          height: 10px;
          background-color: rgba(0,0,0,0.4);
          border-radius: 50%;
          float: left;
          margin-right: 16px;
          border-style: solid;
          border-width: 2px;
          border-color: rgba(255,255,255, 0.6);
          cursor: pointer;
        }
        .point.active{
          background-color: rgba(255,255,255,0.4);
        }
    </style>
    JS 섹션
    
    <script>
        // 
        var items = document.getElementsByClassName('item')// 
        var goPreBtn = document.getElementById('goPre');
        var goNextBtn = document.getElementById('goNext');
        // 
        var points=document.getElementsByClassName('point');
    
       var time=0;// 
    
        var index = 0; // 
        // 
    
        var clearActive=function(){
          for(var i=0;i<items.length;i++){
            items[i].className='item';
            points[i].className='point';
          }
        }
    
        var goIndex=function(){
          clearActive();
          items[index].className='item active';
          points[index].className='point active';
        }
    
        var goNext=function(){
          if(index<4){
            index++;
          }else{
            index=0;
          }
          goIndex();
        }
        var goPre=function(){
          if(index==0){
            index=4;
          }else{
            index--;
          }
          goIndex();
        }
    
        // 
        goNextBtn.addEventListener('click' ,function(){
          goNext();
          time=0;
        })
      // 
        goPreBtn.addEventListener('click' ,function(){
          goPre();
          time=0;
        })
    
       for(var i=0;i<points.length;i++){
        points[i].addEventListener('click',function(){
          var pointIndex=this.getAttribute('data-index');
          index=pointIndex;
          goIndex();
          time=0;
        })
       }
       
      // 
      setInterval(function(){
        time++;
        if(time==20){
          goNext();
          time=0;
        } 
      },100)
    </script>
    이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

    좋은 웹페이지 즐겨찾기