JavaScript는 큰 이미지 캐러셀 효과를 구현합니다.-JS 튜토리얼-php.cn

JavaScript는 큰 이미지 캐러셀 효과를 구현합니다.

高洛峰

풀어 주다： 2017-01-12 10:40:56

원래의

1052명이 탐색했습니다.

본 글의 예시는 참고용으로 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>
    <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>

로그인 후 복사

위 내용이 본 글의 전체 내용이길 바랍니다. 여러분의 연구에 도움이 될 것입니다. 또한 모든 분들이 PHP 중국어 웹사이트를 지원해 주시길 바랍니다.

대형 이미지 캐러셀 효과 구현을 위한 JavaScript 사용과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!