Heim > Artikel > Web-Frontend > JavaScript implementiert den Karusselleffekt für große Bilder

JavaScript implementiert den Karusselleffekt für große Bilder

高洛峰Original: 2017-01-12 10:40:561004Durchsuche

Das Beispiel in diesem Artikel teilt den spezifischen Code für den js-Bildkarusselleffekt als Referenz. Der spezifische Inhalt ist wie folgt

<head>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>大图轮播</title>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
      }
       
      #container {
        width: 500px;
        height: 300px;
        /*border: 1px solid black;*/
        position: relative;
        overflow: hidden;
      }
       
      .btn {
        height: 100%;
        width: 30px;
        /*border: 1px solid red;*/
        position: absolute;
        text-align: center;
        line-height: 300px;
        font-size: 40px;
        font-weight: 900;
        color: black;
        opacity: 0.3;
        transition: 0.6s;
        z-index: 999;
        background-color: white;
      }
       
      .btn:hover {
        cursor: pointer;
        opacity: 0.8;
      }
       
      #left-btn {
        left: 0px;
        top: 0px;
      }
       
      #right-btn {
        right: 0px;
        top: 0px;
      }
       
      #ad-container {
        width: 2500px;
        height: 300px;
        /*border: 1px solid blue;*/
        position: relative;
      }
       
      .ad {
        width: 500px;
        height: 300px;
        float: left;
        text-align: center;
        line-height: 300px;
        font-size: 100px;
        font-family: "微软雅黑";
      }
    </style>
  </head>
 
  <body>
    <div id="container">
      <div id="left-btn" class="btn">
        <</div>
          <div id="right-btn" class="btn">></div>
          <div id="ad-container">
            <div class="ad" style="background-color: mediumpurple;">1</div>
            <div class="ad" style="background-color: yellowgreen;">2</div>
            <div class="ad" style="background-color: rosybrown;">3</div>
            <div class="ad" style="background-color: salmon;">4</div>
            <div class="ad" style="background-color: cyan;">5</div>
          </div>
      </div>
  </body>
 
</html>
<script type="text/javascript">
  var rightBtn = document.getElementById("right-btn");
  var leftBtn = document.getElementById("left-btn");
  var n = 1;
/*  var count = 1*/;
  var arr = new Array();
/*  var m=1;
*/  rightBtn.onclick = function() {
    var x = window.setInterval("to_right()", 20);
    arr.push(x);
  }
 
  function clear() {
    for(var i in arr) {
      window.clearInterval(arr[i]);
    }
  }
 
  function to_right() {
 
    var adContainer = document.getElementById("ad-container");
    if(n == 5) {
      clear();
    } else if(adContainer.offsetLeft != n * (-500)) {
      adContainer.style.marginLeft = adContainer.offsetLeft - 25 + "px";
    } else {
      n++;
      clear();
    }
  }
  var arr1 = new Array();
 
  leftBtn.onclick = function() {
    var y = window.setInterval("to_left()", 20);
    arr1.push(y);
  }
 
  function clear2() {
    for(var y in arr1) {
      window.clearInterval(arr1[y]);
    }
  }
 
  function to_left() {
 
    var adContainer = document.getElementById("ad-container");
    if(n == 1) {
      clear2();
    } else if(adContainer.offsetLeft != (n-2) * (-500)) {
      adContainer.style.marginLeft = adContainer.offsetLeft + 25 + "px";
    } else {
      n--;
      clear2();
    }
  }
 
   
</script>

Das Obige ist der gesamte Inhalt dieses Artikels wird für Ihr Studium hilfreich sein. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zur Verwendung von JavaScript zur Implementierung des Karusselleffekts für große Bilder finden Sie auf der chinesischen PHP-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：jQuery verwendet die Ajax-Methode, um das Beispiel der zurückgegebenen JSON-Datenfunktion zu analysierenNächster Artikel：jQuery verwendet die Ajax-Methode, um das Beispiel der zurückgegebenen JSON-Datenfunktion zu analysieren

In Verbindung stehende Artikel

Mehr sehen