当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript实现大图轮播效果

JavaScript实现大图轮播效果

2019年03月30日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了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>

精彩专题分享：jquery图片轮播 javascript图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网