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

最新推荐文章于 2023-12-25 13:30:00 发布

「已注销」

最新推荐文章于 2023-12-25 13:30:00 发布

阅读量139

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hb101khc2jaa&title=%E5%88%A9%E7%94%A8JS%E5%81%9A%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E2%80%94%E2%80%94%E5%A4%A7%E5%9B%BE%E8%BD%AE%E6%92%AD

版权

前端专栏收录该内容

182 篇文章 0 订阅

订阅专栏

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

<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>

更多专业前端知识，请上【猿2048】www.mk2048.com

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用JS做网页特效——大图轮播

大图轮播完整流程代码操作： <style> * { margin: 0px; padding: 0px; ...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。