집 > 기사 > 웹 프론트엔드 > JavaScript를 사용하여 회전식 캐러셀 차트를 구현하기 위한 샘플 코드 공유

JavaScript를 사용하여 회전식 캐러셀 차트를 구현하기 위한 샘플 코드 공유

黄舟원래의: 2017-08-20 10:11:541524검색

이 글에서는 주로 JavaScript로 회전 캐러셀 차트를 구현하는 방법을 자세히 소개하는데, 관심 있는 친구들은 참고해 보세요.

저는 최근에 JavaScript를 배우고 있는데, 회전 캐러셀 차트를 사용해 본 사례가 있습니다. js를 사용하여 간단한 회전식 이미지를 만들려고 합니다. 동적 효과를 표시할 수 없기 때문에 스크린샷을 넣습니다.

효과는 다음과 같습니다. 총 7장의 사진이 있으며 자동으로 왼쪽으로 슬라이드됩니다. , 왼쪽 및 오른쪽 화살표를 사용하여 캐러셀의 왼쪽 및 오른쪽 슬라이딩을 제어할 수 있습니다. 동시에 마우스가 사진에서 멈추면 마우스가 멀어지면 캐러셀이 자동으로 슬라이딩을 중지합니다. 왼쪽으로 회전합니다.
먼저 여기에 두 가지 함수를 캡슐화했습니다(아직 jQuery를 배우지 않았기 때문에 함수를 캡슐화하는 방법을 사용하여 구현했습니다). 첫 번째 함수는 요소를 가져오기 위해 호출할 수 있는 $ 함수입니다. html의 코드는 다음과 같습니다.

`function $(select){
    if (typeof select != &#39;string&#39;) {
      console.log(&#39;传入的参数有误&#39;);     
      return null;
    }
    var firstChar = select.charAt(0);
    switch(firstChar){
      case &#39;#&#39;:
        return document.getElementById(select.substr(1));
      break;
      case &#39;.&#39;:
        if (document.getElementsByClassName){
          return document.getElementsByClassName(select.substr(1));
        } else {
          var result = [];
          var allElemnts = document.getElementsByTagName(&#39;*&#39;);
          console.log(allElemnts);
          for (var i = 0; i < allElemnts.length; i++){
            var e = allElemnts[i];
            var className = e.className;
            var classArr = className.split(&#39; &#39;);
            for (var j = 0; j < classArr.length; j++){
              var c = classArr[j];
              if (c == select.substr(1)) {
                result.push(e);
                break;
              }
            }
          }
          return result;
        }
      break;
      default :
        return document.getElementsByTagName(select);
    }
  }`

두 번째 함수는 json을 사용하여 여러 스타일을 동적으로 변경하여 애니메이션 효과를 얻는 애니메이션 함수입니다. `

function animate(element, json, fun) {
  clearInterval(element.timer);
  function getStyle(element, styleName){
    if(element.currentStyle){
      //ie浏览器下 直接通过currentstyle来获取
      //return element.currentStyle.heigh;
      return element.currentStyle[styleName];
    }else{
      var computedStyle = window.getComputedStyle(element,null);
      return computedStyle[styleName];
    }
  }
  var isStop = false;
  element.timer = setInterval(function () {
    isStop = true;
    for (var key in json){
      var target = json[key];
      var current;
      if (key == &#39;opacity&#39;) {
        //当动画的类型为透明度时 获取的值应该是浮点类型
        current = parseFloat(getStyle(element, key)) || 1;
      } else {
        //其他情况 用整数类型
        current = parseInt(getStyle(element, key)) || 0;
      }      
      var step = (target - current) / 10;
      if (key != &#39;opacity&#39;) {
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
      }
      current += step;
      if (key == &#39;opacity&#39;) {
        if (Math.abs(target - current) > 0.01) {
          isStop = false;
        } else {
          current = target;
        }
        element.style.opacity = current + &#39;&#39;;
      } else {
        if (Math.abs(target-current) > Math.abs(step)) {
          isStop = false;
        } else {
          current = target;
        }
        if (key == &#39;zIndex&#39;){
          element.style.zIndex = Math.round(current);
        } else {
          element.style[key] = current + &#39;px&#39;;
        }        
      }      
    }
    if (isStop) {
      clearInterval(element.timer);
      console.log(&#39;动画完成&#39;);
      if (typeof fun == &#39;function&#39;) {
        fun();
      }
    }
  }, 30);
}`

The 다음 단계는 html 부분을 작성하는 것입니다. 왜냐하면 사진이 몇 개밖에 없기 때문에 html 부분은 매우 간단합니다.

<body>
  <p class="box">
    <p class="content">
      <ul>
        <li><a href="#"><img src="./images/1.jpg"></a></li>
        <li><a href="#"><img src="./images/2.jpg"></a></li>
        <li><a href="#"><img src="./images/3.jpg"></a></li>
        <li><a href="#"><img src="./images/4.jpg" class="current"></a></li>
        <li><a href="#"><img src="./images/5.jpg"></a></li>
        <li><a href="#"><img src="./images/6.jpg"></a></li>
        <li><a href="#"><img src="./images/7.jpg"></a></li>
      </ul>
    </p>
    <p class="control">
      <a href="javascript:;" id="prev"></a>
      <a href="javascript:;" id="next"></a>
    </p>
  </p>
</body>

CSS 스타일 부분에는 설명이 별로 없습니다.

다음은 JS 부분입니다. 코드도 매우 간단합니다. 명확히 해주세요

 window.onload = function(){
  //定位,并给图片设置大小透明度
  var json = [{
    width: 630,
    top: 23,
    left: 0,
    zIndex: 2,
    opacity: 0
  },{
    width: 630,
    top: 23,
    left: 0,
    zIndex: 3,
    opacity: 0
  },{
    width: 630,
    top: 23,
    left: 0,
    zIndex: 4,
    opacity: 0.6
  },{
    width: 730,
    top: 0,
    left: 125,
    zIndex: 5,
    opacity: 1
  },{
    width: 630,
    top: 23,
    left: 350,
    zIndex: 4,
    opacity: 0.6
  },{
    width: 630,
    top: 23,
    left: 350,
    zIndex: 3,
    opacity: 0
  },{
    width: 630,
    top: 23,
    left: 350,
    zIndex: 2,
    opacity: 0
  }];

function refreshImageLocatin(index){
    //默认情况下 第i张图对应第i个位置
    //index=1时 第i个图对应i-1个位置
    //也就是第i个图对应i-index的位置
    var liArr = $(&#39;li&#39;);
    for(var i = 0; i < liArr.length; i++){
      var li = liArr[i];
      var locationIndex = i - index;
      console.log(&#39;i=&#39;+i);
      console.log(&#39;index=&#39;+index);
      console.log(&#39;locationIndex=&#39;+locationIndex);
      if(locationIndex < 0){
        locationIndex += 7;
      }
      var locationData = json[locationIndex];
      animate(li, locationData, null);
    }
  }

  refreshImageLocatin(0);

  var index = 0;
  $(&#39;#next&#39;).onclick = function(){
    index++;
    if(index == 7){
      index = 0;
    }
    refreshImageLocatin(index);
  }
  $(&#39;#prev&#39;).onclick = function(){
    index--;
    if(index < 0){
      index = 6;
    }
    refreshImageLocatin(index);
  }

  var nextImage = $(&#39;#next&#39;).onclick;
  var contentBox = $(&#39;.content&#39;)[0];
  //自动播放
  var timer = setInterval(nextImage, 3000);
  //当鼠标移动到图片上，停止播放
  contentBox.onmouseover = function(){
    clearInterval(timer);
  }
  contentBox.onmouseout = function(){
    timer = setInterval(nextImage ,3000)
  }
}

위 내용은 JavaScript를 사용하여 회전식 캐러셀 차트를 구현하기 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript의 Hoisting에 대한 자세한 설명다음 기사：JavaScript의 Hoisting에 대한 자세한 설명