js는 이미지의 시작과 끝에서 부드러운 캐러셀을 구현합니다.-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-01-15 14:16:45

원래의

1487명이 탐색했습니다.

이 글은 주로 이미지의 시작과 끝을 원활하게 회전시키기 위한 글을 제공합니다(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 함수를 설정하여 즉시 전환을 수행한 다음 조절을 사용하여 최대를 보장하는 것입니다. (속도).

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