JavaScript实现大图轮播效果

2019-11-19 18:00:18

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：ajax的分页查询示例（不刷新页面）

下一篇：微信小程序特效菜单抽屉效果实例代码