大图轮播js

<!DOCTYPE html>
<html>

<head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           * {
               margin: 0px;
               padding: 0px;
           }

           #stage {
               width: 400px;
               height: 40px;
               border: 3px solid black;
               margin: 100px;
               overflow: hidden;
               position: relative;
           }

           #banner {
               width: 2400px;
               height: 300px;
               background-color: rosybrown;
           }

           .items {
               width: 400px;
               height: 40px;
               color: white;
               font-size: 25px;
               text-align: center;
               line-height: 300px;
               float: left;
           }

           .btn-l,
           .btn-r {
               width: 50px;
               height: 300px;
               background-color: black;
               opacity: 0.5;
               color: white;
               font-size: 40px;
               line-height: 300px;
               text-align: center;
               position: absolute;
               top: 0px;
           }

           .btn-l {
               left: 0px;
           }

           .btn-r {
               right: 0px;
           }

           .btn-l:hover,
           .btn-r:hover {
               cursor: pointer;
               /*透明度*/
               opacity: 0.2;
           }
       </style>
   </head>

<body>
       <div id="stage">
           <div class="btn-l">
               <</div>
                   <div class="btn-r">></div>
                   <div id="banner">
                       <div class="items" style="">平洋房产真实房源xxxx套</div>
                       <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                       <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                       <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                       <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                       <div class="items" style="">平洋房产真实房源xxxx套</div>
                   </div>
           </div>
   </body>

</html>
<script>
   var btn_l = document.getElementsByClassName('btn-l')[0];
   var btn_r = document.getElementsByClassName("btn-r")[0];
   var banner = document.getElementById("banner");
   var count = 1;
   var arr = [];

btn_r.onclick = function() {
       if(count < 6) {
           count++;
           arr.push(window.setInterval("move_left()", 20));
       } else if(count == 6) {
           count = 1;
           banner.style.marginLeft = 0 + "px";

count++;
           arr.push(window.setInterval("move_left()", 20));
       }
   }

btn_l.onclick = function() {
       if(count > 1) {
           count--;
           arr.push(window.setInterval("move_right()", 20));
       } else if(count = 1) {
           count = 5;
           banner.style.marginLeft = -2000 + "px";

count++;
           arr.push(window.setInterval("move_left()", 20));
       }
   }

function move_left() {
       if(banner.offsetLeft == (count - 1) * (-400)) {
           clear();
       } else {
           banner.style.marginLeft = banner.offsetLeft - 20 + "px";
       }
   }

function move_right() {
       if(banner.offsetLeft == (count - 1) * (-400)) {
           clear();
       } else {
           banner.style.marginLeft = banner.offsetLeft + 20 + "px";
       }
   }

function clear() {
       for(var x in arr) {
           window.clearInterval(arr[x]);
       }
   }
   //-----------------------------   分割线--------------------------------
</script>

巴特西

大图轮播js

最新文章

热门文章