JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명

이번에는 JS 캐러셀 스테이 효과를 구현하는 단계에 대해 자세히 설명하고, JS 캐러셀 스테이 효과를 구현하기 위한 주의 사항은 무엇인지 살펴보겠습니다.

1. 아이디어

1. 캐러셀 스테이는 무선 스크롤과 매우 유사하며 둘 다 캐러셀을 달성하기 위해 속성과 변수를 사용합니다.

2 차이점은 캐러셀 스테이에 전환 속성을 추가해야 한다는 것입니다. timing 도구를 사용하여 회전 목마 스테이 효과를 얻을 수 있습니다.

2. 단계

1. 기본 구조 스타일을 작성합니다.

첫 번째 그림과 동일한 그림을 하나 더 추가해야 합니다.

2. 캐러셀 스테이 이벤트를 추가하세요. 이전 파운데이션에 인덱스 서클 기본 이벤트를 캐러셀 스테이 이벤트에 직접 추가하세요. , 전환을 제거해야 합니다. 여기서 setTimeout 타이머를 사용하면 카드의 마지막 사진이 회전된 후 지연이 없으며 첫 번째 사진이 마지막 사진과 동일하기 때문에 바로 첫 번째 사진으로 이동합니다. , 연속 캐러셀 효과처럼 보이는 시각적 사각지대가 형성됩니다.

//轮播停留方法
function move() {
 box.className = "box anmint";
 circle[count].style.backgroundColor = "";
 count++;
 box.style.marginLeft = (-800 * count) + "px";
 //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换
 setTimeout(function () {
   if (count >= 6) {
    count = 0;
    box.className = "box";
    //marginLeft=0之前去除过渡属性
    box.style.marginLeft = "0px";
   }
  circle[count].style.backgroundColor = "red";
 }, 500);
}

3. 인덱스 원에 진입하는 이벤트 추가

기본적으로 인덱스 페이드 인 및 아웃 이벤트와 동일합니다. 차이점은 여기에서 캐러셀 스테이 이벤트를 호출할 필요가 없으며 현재 인덱스가 변환을 따르도록 사진을 인덱싱하는 데 직접 사용된다는 것입니다. 따라서 기본 동작은 다음과 같습니다. 다시 실행하면 기본 동작이 현재 표시된 이미지 바로 뒤에 실행됩니다.

//进入索引圈事件
for(var j=0;j<circle.length><p style="text-align: left;">4. 마우스 입력 및 종료 코드를 개선하세요<code>count=this.index</code></p>
<p style="text-align: left;">렌더링: <strong></strong></p>
<p style="text-align: left;"></p>전체 코드: <p style="text-align: left;"></p>
<pre class="brush:php;toolbar:false">nbsp;html> 
 
 
 <meta> 
 <title>JS轮播停留效果</title> 
 <style> 
  *{margin: 0;padding: 0;} 
  html,body{width: 100%;height: 100%;} 
  .block{ 
   width: 800px; 
   height: 400px; 
   margin: 80px auto; 
   position: relative; 
   border: 1px solid red; 
   overflow: hidden; 
  } 
  .box{ 
   width: 5600px; 
   height: 400px; 
   float: left; 
  } 
  .anmint{ 
   transition: all 0.5s ease-in-out; 
  } 
  img{ 
   width: 800px; 
   height: 400px; 
   float: left; 
  } 
  .cir{ 
   width: 150px; 
   height: 20px; 
   z-index: 7; 
   position: absolute; 
   bottom: 10px; 
   left: 320px; 
  } 
  .circle{ 
   width: 10px; 
   height: 10px; 
   border: 2px solid grey; 
   border-radius: 50%; 
   float: left; 
   margin: 0 5px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var box=document.getElementsByClassName("box")[0]; 
   var count=0; 
   //索引圈事件 
   var circle=document.getElementsByClassName("circle"); 
   circle[0].style.backgroundColor="red"; 
   var time=setInterval(function(){ 
    move(); 
   },2000); 
   //鼠标进入事件 
   var block=document.getElementsByClassName("block")[0]; 
   block.onmouseenter=function(){ 
    clearInterval(time); 
   }; 
   //鼠标离开事件 
   block.onmouseleave=function(){ 
    time=setInterval(function(){ 
     move(); 
    },2000); 
   }; 
   //进入索引圈事件 
   for(var j=0;j<circle.length;j++){ 
    circle[j].index=j; 
    circle[j].onmouseenter=function(){ 
     for(var k=0;k<circle.length;k++){ 
      circle[k].style.backgroundColor=""; 
     } 
     this.style.backgroundColor="red"; 
     //图片跟随移动 
     box.className="box anmint"; 
     box.style.marginLeft=(-800*this.index)+"px"; 
     count=this.index; 
    } 
   } 
   //轮播停留方法 
   function move() { 
    box.className = "box anmint"; 
    circle[count].style.backgroundColor = ""; 
    count++; 
    box.style.marginLeft = (-800 * count) + "px"; 
    //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换 
    setTimeout(function () { 
      if (count >= 6) { 
       count = 0; 
       box.className = "box"; 
       //marginLeft=0之前去除过渡属性 
       box.style.marginLeft = "0px"; 
      } 
     circle[count].style.backgroundColor = "red"; 
    }, 500); 
   } 
  } 
 </script> 
 
 
<p> 
 </p><p> 
   <img  class="imgg lazy" src="/static/imghwm/default1.png" data-src="./image/box1.jpg" alt="JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명" > 
   <img  class="imgg lazy" src="/static/imghwm/default1.png" data-src="./image/box2.jpg" alt="JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명" > 
   <img  class="imgg lazy" src="/static/imghwm/default1.png" data-src="./image/box3.jpg" alt="JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명" > 
   <img  class="imgg lazy" src="/static/imghwm/default1.png" data-src="./image/box4.jpg" alt="JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명" > 
   <img  class="imgg lazy" src="/static/imghwm/default1.png" data-src="./image/box5.jpg" alt="JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명" > 
   <img  class="imgg lazy" src="/static/imghwm/default1.png" data-src="./image/box6.jpg" alt="JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명" > 
   <img  class="imgg lazy" src="/static/imghwm/default1.png" data-src="./image/box1.jpg" alt="JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명" > 
 </p> 
 <p> 
  </p><p></p> 
  <p></p> 
  <p></p> 
  <p></p> 
  <p></p> 
  <p></p> 
  
 
 

이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Linux에서 정규식 사용에 대한 자세한 설명

미니 프로그램에서 사진 저장 및 Moments에 공유 기능 구현

위 내용은 JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!