Exemple de partage de code pour la mise en œuvre d'un graphique carrousel rotatif à l'aide de JavaScript-js tutoriel-php.cn

Exemple de partage de code pour la mise en œuvre d'un graphique carrousel rotatif à l'aide de JavaScript

黄舟

Libérer： 2017-08-20 10:11:54

original

1556 Les gens l'ont consulté

Cet article présente principalement en détail la mise en œuvre d'images de carrousel rotatives en JavaScript, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

J'ai récemment appris JavaScript, puis j'ai vu la rotation dans le. cas du graphique carrousel, j'ai essayé d'utiliser js pour faire un graphique carrousel simple Comme l'effet dynamique ne peut pas être affiché, j'ai mis une capture d'écran :

Ceci. L'effet est le suivant : il y a 7 images au total, et elles glisseront automatiquement vers la gauche. Ensuite, les flèches gauche et droite peuvent également contrôler le glissement vers la gauche et la droite du carrousel en même temps, si la souris s'arrête. l'image, le carrousel s'arrêtera. Glissement automatique, lorsque la souris s'éloignera, le carrousel continuera vers la gauche.
Tout d'abord, j'ai encapsulé deux fonctions ici (car je n'ai pas encore appris jQuery, j'ai donc utilisé la méthode d'encapsulation de fonctions pour l'implémenter. La première fonction est la fonction $, qui peut être appelée pour obtenir). les éléments dans le html. Le code est le suivant :

`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);
    }
  }`

Copier après la connexion

La deuxième fonction est une fonction d'animation qui utilise json pour modifier dynamiquement plusieurs styles afin d'obtenir un effet d'animation. . Le code est le suivant : `

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);
}`

Copier après la connexion

La prochaine étape consiste à écrire la partie html Comme il n'y a que quelques images, la partie html est très simple. :

<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>

Copier après la connexion

Il n'y a pas beaucoup de description sur la partie style CSS.

Ce qui suit est la partie JS, le code est également très simple, il suffit de l'éclaircir

 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
  }];

Copier après la connexion

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)
  }
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!