So implementieren Sie einen Karusselleffekt für große Bilder mit JavaScript-js-Tutorial-php.cn

So implementieren Sie einen Karusselleffekt für große Bilder mit JavaScript

巴扎黑

Freigeben： 2017-04-09 10:30:29

Original

1576 Leute haben es durchsucht

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>
    <p id="container">
      <p id="left-btn" class="btn">
        <</p>
          <p id="right-btn" class="btn">></p>
          <p id="ad-container">
            <p class="ad" style="background-color: mediumpurple;">1</p>
            <p class="ad" style="background-color: yellowgreen;">2</p>
            <p class="ad" style="background-color: rosybrown;">3</p>
            <p class="ad" style="background-color: salmon;">4</p>
            <p class="ad" style="background-color: cyan;">5</p>
          </p>
      </p>
  </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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Karusselleffekt für große Bilder mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!