집 > 기사 > 웹 프론트엔드 > JavaScript 캐러셀 스테이 효과 구현에 대해

JavaScript 캐러셀 스테이 효과 구현에 대해

不言원래의: 2018-07-04 10:22:531180검색

이 글에서는 JavaScript 캐러셀 스테이 효과를 구현하는 방법을 공유하겠습니다. 캐러셀 스테이는 둘 다 속성과 변수를 사용하여 캐러셀을 구현합니다. 관심있는 친구들 한번 보세요

1. Ideas

1. 매우 유사합니다. 캐러셀을 달성하기 위해 속성과 변수를 사용합니다.

2. 차이점은 캐러셀이 유지될 때 캐러셀 유지 효과를 달성하려면 전환 속성과 타이머를 추가해야 한다는 것입니다. 🎜 #

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;
 }
}

count=this.index

4. 마우스 입력 및 종료 코드 개선

효과 사진:

전체 코드:

<!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>

#🎜🎜 # 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

JavaScript 캐러셀 스테이 효과 구현에 대해

관련 기사