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中文网其他相关文章！