JavaScript で大きな画像のカルーセル効果を実装する方法-jsチュートリアル-php.cn

JavaScript で大きな画像のカルーセル効果を実装する方法

巴扎黑

リリース： 2017-04-09 10:30:29

オリジナル

1536 人が閲覧しました

この記事の例では、参考のために JS 画像カルーセル効果の特定のコードを共有します。具体的な内容は次のとおりです

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

ログイン後にコピー

以上がJavaScript で大きな画像のカルーセル効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。