輪播圖（多環境使用初級版）

時間 2019-12-06

標籤環境使用初級简体版

原文原文鏈接

<!DOCTYPE html>
<html>javascript

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

           .xsk {
               width: 550px;
               height: 100px;
               position: relative;
               border: 1px solid black;
               overflow: hidden;
           }

           .imglist {
               position: absolute;
               top: 0px;
               left: 0px;
               overflow: hidden;
               width: 300%;
               height: 100px;
               transition: 1s ease-in-out;
           }

           .kuai {
               float: left;
               margin-left: 5px;
               margin-right: 5px;
               width: 100px;
               height: 100px;
               background-color: powderblue;
           }

           .left_btn {
               font-size: 40px;
               position: absolute;
               top: 30px;
               left: 25px;
               cursor: pointer;
           }

           .right_btn {
               font-size: 40px;
               position: absolute;
               top: 30px;
               right: 25px;
               cursor: pointer;
           }

           .lubokkuang {
               margin-left: 50px;
               overflow: hidden;
           }
       </style>
   </head>css

   <body>
       <div class="lubokkuang">
           <div class="xsk">
               <div class="imglist">
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
                   <div class="kuai"></div>
               </div>
               <div class="left_btn">
                   <</div>
                       <div class="right_btn">></div>
               </div>
           </div>
           <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
           <script src="lunboimg.js" type="text/javascript" charset="utf-8"></script>
           <script type="text/javascript">
               // img個體
               function imgbtnimg(imgclass, imglist, kuang, leftbtn, rightbtn, marlf) {
                   this.imgclass = imgclass; //imgclass 圖片的class
                   this.imglist = imglist; //裝img的容器
                   this.kuang = kuang; //顯示區域
                   this.leftbtn = leftbtn; //left按鈕
                   this.rightbtn = rightbtn; //right按鈕
                   this.marlf = marlf;
                   this.morelunbofun = function() {
                       var kuaiw = $(imgclass).width();
                       var kwidth = $(kuang).width();
                       var numbers = $(imglist).children(imgclass).length;
                       var newleft;
                       var lastleft;
                       $(leftbtn).on("click", function() {
                           newleft = $(imglist).position().left;
                           lastleft = newleft + kwidth;
                           if(lastleft >= 0) {
                               if(lastleft >= kwidth) {} else {
                                   $(imglist).css("left", newleft - newleft + "px");
                               }
                           } else {
                               $(imglist).css("left", newleft + kwidth + "px");
                           }
                       });
                       $(rightbtn).on("click", function() {
                           var langs = (kuaiw + marlf) * numbers - kwidth;
                           newleft = $(imglist).position().left;
                           var lsleft = langs + newleft;
                           if(lsleft < kwidth) {
                               $(imglist).css("left", newleft - lsleft + "px");
                           } else {
                               $(imglist).css("left", newleft - kwidth + "px");
                           }
                       });
                   }
               }
               var moreimg = new imgbtnimg(".kuai", ".imglist", ".xsk", ".left_btn", ".right_btn", 10);
               moreimg.morelunbofun();
           </script>
   </body>html