Heim >Web-Frontend >js-Tutorial >Beispielcode-Freigabe für die Implementierung eines rotierenden Karusselldiagramms mithilfe von JavaScript

Beispielcode-Freigabe für die Implementierung eines rotierenden Karusselldiagramms mithilfe von JavaScript

黄舟Original: 2017-08-20 10:11:541550Durchsuche

Dieser Artikel stellt hauptsächlich die Implementierung rotierender Karussellbilder in JavaScript vor. Er hat einen gewissen Referenzwert.

Ich habe kürzlich JavaScript gelernt und dann die Rotation gesehen Im Fall des Karusselldiagramms habe ich versucht, mit js ein einfaches Karusselldiagramm zu erstellen. Da der dynamische Effekt nicht angezeigt werden kann, habe ich einen Screenshot eingefügt:

Dies Der Effekt ist wie folgt: Es gibt insgesamt 7 Bilder, die dann automatisch nach links und rechts verschoben werden, wenn die Maus anhält Im Bild stoppt das Karussell automatisch. Wenn die Maus wegbewegt wird, bewegt sich das Karussell weiter nach links.
Zuerst habe ich hier zwei Funktionen gekapselt (da ich jQuery noch nicht gelernt habe, also habe ich die Methode zum Kapseln von Funktionen verwendet, um sie zu implementieren. Die erste Funktion ist die $-Funktion, die zum Abrufen aufgerufen werden kann). Die Elemente im HTML lauten wie folgt:

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

Die zweite Funktion ist eine Animationsfunktion, die JSON verwendet, um mehrere Stile dynamisch zu ändern, um einen Animationseffekt zu erzielen . Der Code lautet wie folgt: „

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

Da es nur wenige Bilder gibt, ist der HTML-Teil sehr einfach :

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

Es gibt nicht viele Beschreibungen zum CSS-Stil.

Das Folgende ist der JS-Teil, der Code ist auch sehr einfach, klären Sie ihn einfach

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

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe für die Implementierung eines rotierenden Karusselldiagramms mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung des Hebens in JavaScriptNächster Artikel：Ausführliche Erklärung des Hebens in JavaScript

In Verbindung stehende Artikel

Mehr sehen