Home > Article > Web Front-end > JavaScript implements large image carousel effect

JavaScript implements large image carousel effect

高洛峰Original: 2017-01-12 10:40:56973browse

The example of 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>
    <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>

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that Please support PHP Chinese website.

For more articles related to the realization of large image carousel effect using JavaScript, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery uses the ajax method to parse the returned json data function exampleNext article：jQuery uses the ajax method to parse the returned json data function example

See more

JavaScript implements large image carousel effect

Related articles