Sample code sharing for implementing rotating carousel chart using JavaScript

This article mainly introduces the implementation of rotating carousels in JavaScript in detail, which has certain reference value. Interested friends can refer to it

I have been learning JavaScript recently, and then saw the rotation In the case of the carousel chart, I tried to use js to make a simple carousel chart. Because the dynamic effect could not be displayed, I put a screenshot:

This The effect is like this: there are 7 pictures in total, and they will automatically slide to the left. Then the left and right arrows can also control the left and right sliding of the carousel. At the same time, if the mouse stops on the picture, the carousel will stop. Automatic sliding, when the mouse is moved away, the carousel will continue to the left.
First of all, I have encapsulated two functions here (because I haven’t learned jQuery yet, so I used the method of encapsulating functions to implement it). The first function is the $ function, which can be called to get the elements in html. The code is as follows:

`function $(select){
    if (typeof select != 'string') {
      console.log('传入的参数有误');     
      return null;
    }
    var firstChar = select.charAt(0);
    switch(firstChar){
      case '#':
        return document.getElementById(select.substr(1));
      break;
      case '.':
        if (document.getElementsByClassName){
          return document.getElementsByClassName(select.substr(1));
        } else {
          var result = [];
          var allElemnts = document.getElementsByTagName('*');
          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);
    }
  }`

The second function is an animation function that uses json to dynamically change multiple styles to achieve an animation effect. The code is as follows: `

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 == 'opacity') {
        //当动画的类型为透明度时 获取的值应该是浮点类型
        current = parseFloat(getStyle(element, key)) || 1;
      } else {
        //其他情况 用整数类型
        current = parseInt(getStyle(element, key)) || 0;
      }      
      var step = (target - current) / 10;
      if (key != 'opacity') {
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
      }
      current += step;
      if (key == 'opacity') {
        if (Math.abs(target - current) > 0.01) {
          isStop = false;
        } else {
          current = target;
        }
        element.style.opacity = current + '';
      } else {
        if (Math.abs(target-current) > Math.abs(step)) {
          isStop = false;
        } else {
          current = target;
        }
        if (key == 'zIndex'){
          element.style.zIndex = Math.round(current);
        } else {
          element.style[key] = current + 'px';
        }        
      }      
    }
    if (isStop) {
      clearInterval(element.timer);
      console.log('动画完成');
      if (typeof fun == 'function') {
        fun();
      }
    }
  }, 30);
}`

The next step is to write the html part. Because there are only a few pictures, the html part is very simple:

<body>
  <p class="box">
    <p class="content">
      <ul>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/1.jpg"  class="lazy"   alt="Sample code sharing for implementing rotating carousel chart using JavaScript" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/2.jpg"  class="lazy"   alt="Sample code sharing for implementing rotating carousel chart using JavaScript" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/3.jpg"  class="lazy"   alt="Sample code sharing for implementing rotating carousel chart using JavaScript" ></a></li>
        <li><a href="#"><img  class="current lazy"  src="/static/imghwm/default1.png"  data-src="./images/4.jpg"    alt="Sample code sharing for implementing rotating carousel chart using JavaScript" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/5.jpg"  class="lazy"   alt="Sample code sharing for implementing rotating carousel chart using JavaScript" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/6.jpg"  class="lazy"   alt="Sample code sharing for implementing rotating carousel chart using JavaScript" ></a></li>
        <li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="./images/7.jpg"  class="lazy"   alt="Sample code sharing for implementing rotating carousel chart using JavaScript" ></a></li>
      </ul>
    </p>
    <p class="control">
      <a href="javascript:;" id="prev"></a>
      <a href="javascript:;" id="next"></a>
    </p>
  </p>
</body>

There is not much description about the css style part.

The following is the JS part, the code is also very simple, just clarify it

 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 = $('li');
    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)
  }
}

The above is the detailed content of Sample code sharing for implementing rotating carousel chart using JavaScript. For more information, please follow other related articles on the PHP Chinese website!