JavaScript实现大图轮播效果

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

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

# js # 轮播 # 简单实现轮播图效果的实例 # 原生js实现图片轮播特效 # 详解js图片轮播效果实现原理 # 原生js实现轮播图的示例代码 # 利用JS做网页特效_大图轮播(实例讲解) # 微软 # 大家分享 # 具体内容 # 大家多多 # relative # position # black # btn # hidden # overflow # solid # width # container # border # height # size # font # color # weight # line

返回目录在线咨询

上一篇：如何在Golang中处理HTTP Header_自定义和解析请求头
下一篇：Python正则系统学习路线第209讲_核心原理与实战案例详解【技巧】

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JavaScript实现大图轮播效果

您的项目需求