JS 캐러셀 스테이 효과 구현 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-05-25 11:02:48

원래의

1593명이 탐색했습니다.

이번에는 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;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;
 }
}

로그인 후 복사

4. 마우스 입력 및 종료 코드를 개선하세요count=this.index

렌더링:

전체 코드:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <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> 
</head> 
<body> 
<p class="block"> 
 <p class="box"> 
   <img class="imgg" src="./image/box1.jpg"> 
   <img class="imgg" src="./image/box2.jpg"> 
   <img class="imgg" src="./image/box3.jpg"> 
   <img class="imgg" src="./image/box4.jpg"> 
   <img class="imgg" src="./image/box5.jpg"> 
   <img class="imgg" src="./image/box6.jpg"> 
   <img class="imgg" src="./image/box1.jpg"> 
 </p> 
 <p class="cir"> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
  <p class="circle"></p> 
 </p> 
</p> 
</body> 
</html>

로그인 후 복사