利用JS做网页特效——大图轮播

2024-08-31 05:23:41

大图轮播完整流程代码操作：

<style>
           * {
               margin: 0px;
               padding: 0px;
           }

           .stage {
               width: 500px;
               height: 300px;
               border: 5px solid black;
               margin: 200px;
               position: relative;
               overflow: hidden;
           }

           .to-left,
           .to-right {
               position: absolute;
               top: 0px;
               width: 50px;
               height: 300px;
               background-color: black;
               color: white;
               font-size: 30px;
               text-align: center;
               line-height: 300px;
               opacity: 0.3;
           }

           .to-left {
               left: 0px;
           }

           .to-right {
               right: 0px;
           }

           .to-left:hover,
           .to-right:hover {
               cursor: pointer;
               opacity: 0.5;
           }

           .banner {
               width: 3000px;
               height: 300px;
           }

           .items {
               float: left;
               width: 500px;
               height: 300px;
               background-color: blanchedalmond;
               font-size: 100px;
               text-align: center;
               line-height: 300px;
           }
       </style>
   </head>

   <body>
       <div class="stage">
           <div class="to-left">
               <</div>
                   <div class="to-right">></div>
                   <div class="banner">
                       <div class="items">1</div>
                       <div class="items" style="">2</div>
                       <div class="items" style="">3</div>
                       <div class="items" style="">4</div>
                       <div class="items" style="">5</div>
                       <div class="items">1</div>
                   </div>
           </div>
   </body>

</html>
<script>
   var to_right = document.getElementsByClassName('to-right')[0];
   var to_left = document.getElementsByClassName('to-left')[0];
   var banner = document.getElementsByClassName('banner')[0];
   var arr = [];
   var count = 1;

   to_right.onclick = function() {
       toRight();
   }

   function toRight(){
       arr.push(window.setInterval("moveLeft()", 30));
   }

   to_left.onclick = function() {
       toLeft();
   }

   function toLeft(){
       arr.push(window.setInterval("moveRight()", 30));
   }

   function moveLeft() {
       if(count < 5) {
           if(banner.offsetLeft > count * (-500)) {
               banner.style.marginLeft = banner.offsetLeft - 20 + "px";
           } else {
               for(var x in arr) {
                   window.clearInterval(arr[x]);
               }
               count++;
           }
//   连接点
       }else{
           if(banner.offsetLeft > count * (-500)) {
               banner.style.marginLeft = banner.offsetLeft - 20 + "px";
           } else {
               for(var x in arr) {
                   window.clearInterval(arr[x]);
               }
               count = 1;
               banner.style.marginLeft = 0 + 'px';
           }
       }
   }

   function moveRight() {
       if(count-1 >0) {
           if(banner.offsetLeft < (count-2) * (-500)) {
               banner.style.marginLeft = banner.offsetLeft + 20 + "px";
           } else {
               for(var x in arr) {
                   window.clearInterval(arr[x]);
               }
               count--;
           }
       }
   }
   window.setInterval("toRight()",1750);


</script>

最新文章

热门文章