집 > 기사 > 웹 프론트엔드 > js는 이미지의 시작과 끝에서 부드러운 캐러셀을 구현합니다.

js는 이미지의 시작과 끝에서 부드러운 캐러셀을 구현합니다.

小云云원래의: 2018-01-15 14:16:451443검색

이 글은 주로 이미지의 시작과 끝을 원활하게 회전시키기 위한 글을 제공합니다(JS 기본 방법 - 조절). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

먼저 HTML 코드를 주세요. 첫 번째 사진 1.jpg가 캐러셀 사진 목록(#list) 끝에 추가되고 마지막 사진 5.jpg가 헤더에 추가됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>首尾轮播</title>
 <link rel="stylesheet" href="首尾轮播.css" rel="external nofollow" >
<script src="首尾轮播.js"></script>
</head>
<body>
 <p id="container">
  <p id="list">
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/5.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/1.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/2.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/3.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/4.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/5.jpg" alt=""></a></p>
   <p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="../imgs/1.jpg" alt=""></a></p>
  </p>

  <p class="arrow" id="prev"><</p>
  <p class="arrow" id="next">></p>


 </p>  

</body> 

</html>

다음으로 CSS 및 js 코드가 제공되며 이미지의 크기, 수량 및 너비에 따라 컨테이너 및 목록의 매개변수를 적절하게 조정할 수 있습니다. JS를 캡슐화할 때.

*{
 margin: 0;
 padding: 0;
}

#container{
 height: 400px;
 width: 500px;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
 border: 1px solid black;
}

#list>p {
 float: left;
}
#list{
 position: absolute; 
 height: 400px;
 width: 3600px;
 
}

#list img{
 height: 400px;
 width: 500px;
}
.arrow {
 user-select:none;
 position: absolute;
 top:150px;
 z-index: 2;
 background-color: #aaa;
 height: 100px;
 width: 80px;
 cursor: pointer;
 opacity: 0.5;
 display: none;
 line-height: 100px;
 text-align: center;
 color: #222;
 font-size: 3em;

}
#container:hover .arrow{
 display: block;
}
 #prev{
 left:20px;
}

 #next{
 right: 20px;
}

JS에서는 속도 변수를 변경하여 이미지 전환 속도를 제어할 수 있습니다....여기서는 전환 효과를 제어하기 위해 element.style.transition을 사용합니다.

window.onload=function(){
 var container = document.getElementById(&#39;container&#39;);
 var list = document.getElementById(&#39;list&#39;);//获取图片容器
 var prev = document.getElementById(&#39;prev&#39;);//向前按钮
 var next = document.getElementById(&#39;next&#39;);//向后按钮
 var nowP = 1; //显示位置
 var judge = null; //执行权
 var speed = 0.1; // 切换速度 秒
 prev.onclick=function(){
  if(!judge){
    judge = setTimeout(function(){
     if(nowP==1){setTimeout(function(){
      list.style.transition="left 0s";
     list.style.left = "-2500px";　
     nowP = 5;},speed*1000);} //当到达图片表左边缘时与动画同步切换 
     list.style.transition = "left "+speed+"s";
    move(500);
    nowP--;
    judge = null;
   },speed*1000);
  }
 };
 next.onclick=function(){
  if(!judge){    
    judge = setTimeout(function(){
     if(nowP==5){setTimeout(function(){
      list.style.transition="left 0s";
     list.style.left = "-500px"; 
     nowP = 1;},speed*1000);} //当到达图片表右边缘时与动画同步切换 
    list.style.transition = "left "+speed+"s";
    move(-500);
    nowP++;
    judge = null;
   },speed*1000);
  }

 };

 function move(num){
  var term = parseInt(list.style.left) + num ; 
  list.style.left = term+"px";
 }

 var roll= setInterval(function(){
  next.onclick();
 },2000);

 container.onmouseenter=function(){
  clearInterval(roll);
 };

 container.onmouseleave=function()
  {
  roll=setInterval(function(){
  next.onclick();
  },2000);
 };

 
};

다음은 하나입니다. 데모 데모는 간단히 말해서 그림 테이블의 시작과 끝으로 전환할 때 애니메이션 전환 시간과 동일한 지연 실행 시간으로 setTimeout 함수를 설정하여 즉시 전환을 수행한 다음 조절을 사용하여 최대를 보장하는 것입니다. (속도).

저도 프론트엔드 초보자인데 도움이 되셨다면 추천 부탁드립니다

js는 이미지의 시작과 끝에서 부드러운 캐러셀을 구현합니다.

관련 기사