js에서 슬라이딩 캐러셀 이미지를 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

js에서 슬라이딩 캐러셀 이미지를 구현하는 방법은 무엇입니까?

零下一度

풀어 주다： 2017-07-09 09:40:45

원래의

1508명이 탐색했습니다.

이 기사에서는 주로 왼쪽에서 오른쪽으로 슬라이딩 캐러셀 효과의 js 구현을 자세히 소개합니다. 관심 있는 친구는 이를 참조할 수 있습니다.

캐러셀은 몇 초마다 자동으로 슬라이드하여 달성합니다. 차례로 재생되는 사진의 효과. 효과 측면에서 보면 슬라이드식 회전식 슬라이드는 그림이 왼쪽에서 오른쪽으로 미끄러지는 효과입니다. 여기서 말하는 회전식 슬라이드식은 그림이 점차적으로 표시되는 효과입니다. 첫 번째 효과를 얻는 방법입니다.

Principle

같은 크기의 사진은 하나의 열로 합쳐지지만, 한 장의 사진만 표시되고 나머지는 숨겨집니다. 왼쪽 값을 수정하여 표시된 사진을 변경합니다.

효과를 보려면 클릭하세요

html 부분

nav는 전체 컨테이너이고, 첫 번째 ul 목록 #index는 작은 점들의 목록입니다. 마우스로 가리는 점은 어떤 그림을 표시할지를 나타냅니다. , on 작은 점들에 배경색 속성을 추가하는 클래스입니다. 두 번째 ul 목록 #img는 사진 목록입니다.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Carousel Figure</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
  </head>
  <body>
  <!--从左向右滑动-->
    <nav>
      <ul id="index">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul id="img">
        <li><img src="../images/img1.jpg" alt="img1"></li>
        <li><img src="../images/img2.jpg" alt="img2"></li>
        <li><img src="../images/img3.jpg" alt="img3"></li>
        <li><img src="../images/img4.jpg" alt="img4"></li>
        <li><img src="../images/img5.jpg" alt="img5"></li>
      </ul>
    </nav>
  <script src="script.js"></script>
  </body>
  </html>

로그인 후 복사

css 부분

이미지 크기는 720*405입니다. 여기서 다음 사항에 주의해야 합니다.

ul#img 목록은 nav에 대해 절대적으로 위치합니다. #img를 설정해야 합니다. 사진을 나란히 표시할 수 있도록 모든 사진의 전체 너비입니다.

전체 컨테이너 탐색의 너비는 사진의 너비인 720px, 즉 하나만 설정되어야 합니다. 그림을 표시할 수 있으며 너비를 벗어난 부분은 숨겨집니다. 즉, Overflow: Hidden

그림 목록에 작은 점 목록이 표시되어야 하므로 #img의 z-index를 설정합니다.

; 작은 점 목록은 테두리 스타일을 변경하여 일련의 리로 구성되므로 배경색만 변경하면 작은 점을 움직이는 효과를 얻을 수 있습니다.

  *{
    margin:0;
    padding:0;
  }
  nav{
    width: 720px;
    height: 405px;
    margin:20px auto;
    overflow: hidden;
    position: relative;
  }
  #index{
    position: absolute;
    left:320px;
    bottom: 20px;
  
  }
  #index li{
    width:8px;
    height: 8px;
    border: solid 1px gray;
    border-radius: 100%;
    background-color: #eee;
    display: inline-block;
  }
  #img{
    width: 3600px;/*不给宽高无法移动*/
    height: 405px;
    position: absolute;/*不定义absolute，js无法设置left和top*/
    z-index: -1;
  }
  #img li{
    width: 720px;
    height: 405px;
    float: left;
  }
  #index .on{
    background-color: black;
  }

로그인 후 복사

JS part

사진 이동 함수 moveElement()

　moveElement 함수는 사진의 현재 위치와 대상 위치를 가져와서 이동할 간격을 계산해야 하며, offsetLeft 및 offsetTop을 사용하여 그림의 현재 위치를 얻을 수 있습니다. 이동할 때 그림을 "스와이프"하는 효과는 이동 거리를 10배로 나누는 것, 즉 setTimeOut 함수를 사용하는 것입니다. 그러나 마우스가 호버링되는 것을 방지하려면 ClearTimeout() 함수를 호출해야 합니다.

  function moveElement(ele,x_final,y_final,interval){//ele为元素对象
    var x_pos=ele.offsetLeft;
    var y_pos=ele.offsetTop;
    var dist=0;
    if(ele.movement){//防止悬停
      clearTimeout(ele.movement);
    }
    if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
      return;
    }
    dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
    x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
    
    dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
    y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
    
    ele.style.left=x_pos+&#39;px&#39;;
    ele.style.top=y_pos+&#39;px&#39;;
    
    ele.movement=setTimeout(function(){//分10次移动，自调用10次
      moveElement(ele,x_final,y_final,interval);
    },interval)
  }

로그인 후 복사

small 도트 이동 함수 moveIndex()

작은 도트 이동의 핵심은 설정된 배경색 클래스를 먼저 이동하는 것입니다. 어떤 li에 배경색이 있는지 확인한 다음 이를 제거하여 모든 li에 배경이 없도록 한 다음 현재 li에 배경을 추가합니다.

  function moveIndex(list,num){//移动小圆点
    for(var i=0;i<list.length;i++){
      if(list[i].className==&#39;on&#39;){//清除li的背景样式
        list[i].className=&#39;&#39;;
      }
    }
    list[num].className=&#39;on&#39;;
  }

로그인 후 복사

사진 자동 캐러셀

　window.onload에 직접 다음 코드를 작성하세요.
　여기서 변수 인덱스를 정의해야 합니다. 이는 인덱스(0~n-1, n은 li의 수) 그림으로 이동한다는 의미입니다.

  var img=document.getElementById(&#39;img&#39;);
  var list=document.getElementById(&#39;index&#39;).getElementsByTagName(&#39;li&#39;);
  var index=0;//这里定义index是变量，不是属性

  var nextMove=function(){//一直向右移动，最后一个之后返回
    index+=1;
    if(index>=list.length){
      index=0;
    }
    moveIndex(list,index);
    moveElement(img,-720*index,0,20);
  };

로그인 후 복사

사진 자동 캐러셀을 사용하려면 setInterval() 함수를 사용해야 합니다. 이를 통해 프로그램은 몇 초마다 자동으로 nextMove() 함수를 호출할 수 있습니다.

  var play=function(){
    timer=setInterval(function(){
      nextMove();
    },2500);
  };

로그인 후 복사

마우스 오버레이 작은 점 효과

　 작은 점이 마우스로 가려졌을 때 해당 그림이 표시되는 효과를 얻으려면 어떤 작은 점이 마우스로 가려졌는지 알아야 합니다. 여기서 각 li에 사용자 정의 속성 인덱스를 추가하여 이 속성의 값은 해당 작은 점의 일련 번호 i(0~n-1, n은 li의 수)이므로 마우스가 이를 덮을 때마다 index 속성의 값만 가져오면 됩니다. 마우스가 어느 작은 점을 덮고 있는지 알아보세요. index 속성은 변수 index와 아무 관련이 없으며 이름만 동일하다는 점에 유의하세요.

  for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
    list[i].index=i;//这里是设置index属性，和index变量没有任何联系
    list[i].onmouseover= function () {
      var clickIndex=parseInt(this.index);
      moveElement(img,-720*clickIndex,0,20);
      index=clickIndex;
      moveIndex(list,index);
      clearInterval(timer);
    };
    list[i].onmouseout= function () {//移开后继续轮播
      play();
    };
  }

로그인 후 복사

요약

캐러셀 차트의 구현은 복잡하지 않습니다. 가장 중요한 것은 그림의 움직이는 동작과 작은 점의 움직이는 동작을 분리하는 것입니다. 이는 구현하기 더 쉽습니다. 이 캐러셀 사진은 실제로 몇 가지 문제가 있는데, 마지막 사진에서 첫 번째 사진으로 슬라이딩할 때 슬라이딩 방식을 변경하면 해결이 쉽습니다. index는 왼쪽 값이며, index는 그림의 움직임과 작은 점의 움직임을 하나로 묶는 것입니다. 슬라이딩 방법을 현재 offsetLeft+(-720)로 변경하면 그림의 움직임이 인덱스 값과 무관할 수 있습니다. , 그리고 html 파일에 값을 추가합니다. 그림:

<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
<li><img src="../images/img1.jpg" alt="img1"></li>

로그인 후 복사

그런 다음 마지막 그림으로 슬라이드할 때 빠르게 오프셋을 0으로 지정하고 첫 번째 그림으로 변경합니다. 두 그림은 동일하며 변경됩니다. 구별이 불가능하므로 원활한 연결이 가능합니다.

rreee

위 내용은 js에서 슬라이딩 캐러셀 이미지를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!