How to implement large image carousel effect with JavaScript-JS Tutorial-php.cn

How to implement large image carousel effect with JavaScript

巴扎黑

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

Original

1577 people have browsed it

The example in this article shares the specific code for the js image carousel effect for your reference. The specific content is as follows

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

Copy after login

The above is the detailed content of How to implement large image carousel effect with JavaScript. For more information, please follow other related articles on the PHP Chinese website!