整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          用JavaScript實現網頁無限輪播圖效果,附整套源碼

          JavaScript實現無限輪播圖效果(附源碼)

          javascript群內每日課題-今日課題:用JavaScript實現無限輪播圖效果

          PS:很多企業通用的案例自己再學習過程中肯定是要熟練的,所以今天做了這個無限輪播,很多人都擔心自己寫的代碼爛,而不敢去寫代碼,總想著等自己等寫出好的代碼再來做游戲,再來練習,其實我的意見是前端新人要多些爛代碼,不管你在學習中還是工作中,你不寫夠足量的爛代碼,是無法進化到寫好代碼的程度,所以練習吧騷年

          如果想要更多的企業求職加分項目,案例,游戲源碼,可以來一下我的前端群216634437,每天都會精挑細選一個特效,項目游戲出來詳細講解,分享!

          知識要點

          1.實現無限循環的原理:

          以偏移的距離來判斷是否跳回第一張和最后一張

          也可以利用循環判斷圖片的當前索引值

          2.當前圖片輪播的圓點變色顯示:

          因為每次點擊index+1 所以當前的index-1就是button的索引

          3.實現動畫滾動效果:

          原理就是把每次的偏移量分為多次完成比如一次600px那就分為10次每次偏移60px

          就要用到setTimeout(go,10);//10毫秒再次調用go函數,一直到不滿足條件就停

          4.點擊圓點按鈕執行動畫:

          原理獲取當前的按鈕位置再獲取要點擊的按鈕的位置

          用(點擊的——當前的)*-600=需要跳轉的正負距離(向左或向右)

          5.自動播放:

          給外層容器加個onmouseover事件再調用setInterval方法

          想要練習這個案例的進群領取源碼:216634437(代碼已經上傳到群文件,自助下載練習)

          頭條號里有許多web前端學習視頻,企業常用特效/案例/項目,敬請關注!

          如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號:‘web前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻

          例1: 無縫連續滾動

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          list-style: none;
          }
          div{
          width: 1000px;
          height: 130px;
          margin: 100px auto;
          border: 1px solid #000;
          position: relative;
          
          overflow: hidden; /* 防止滾動的圖片溢出 */
          }
          ul{
          width: 2000px;
          position: absolute;
          left: 0;
          top: 0;
          }
          li{
          float: left;
          }
          img{
          display: block;
          }
          </style>
          </head>
          <body>
          <div>
          <ul>
          <li><img src="img/1.png"/></li>
          <li><img src="img/2.png"/></li>
          <li><img src="img/3.png"/></li>
          <li><img src="img/4.png"/></li>
          <li><img src="img/5.png"/></li>
          <!--我們在復制一套出來-->
          <li><img src="img/1.png"/></li>
          <li><img src="img/2.png"/></li>
          <li><img src="img/3.png"/></li>
          <li><img src="img/4.png"/></li>
          <li><img src="img/5.png"/></li>
          </ul>
          </div>
          
          <script type="text/javascript">
          var ul = document.getElementsByTagName("ul")[0];
          
          setInterval(function(){
              if(getStyle(ul,"left")===-1000){
              ul.style.left = "0px";//執行這一行代碼需要多長時間???
              }
          
              ul.style.left = getStyle(ul,"left") - 1 + "px";
          },10)
          
          
          function getStyle(obj,attr){
              if(window.getComputedStyle){
              return parseInt(window.getComputedStyle(obj)[attr]);
              }else{
              return parseInt(obj.currentStyle[attr]);
              }
          }
          </script>
          </body>
          </html>

          圖片規格: 200px 130px

          個完整的網站是由多個網頁組成的,下面我來介紹下網頁當中最基本的一種功能——輪播圖:

          下面先看看基本的代碼

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>簡易網站輪播圖</title>

          <style>

          .container{

          width: 100%;

          position: relative;

          }

          .container div{

          width: 100%;

          position: absolute;

          opacity: 0;

          }

          div.show{

          opacity: 1;

          }

          .container img{

          width: 100%;

          border-radius: 10%;

          }

          </style>

          </head>

          <body>

          <div class="container" id="slider">

          <div class="show"><img src="./img/lunbo/01.jpg" alt="" srcset=""></div>

          <div><img src="./img/lunbo/02.jpg" alt="" srcset=""></div>

          <div><img src="./img/lunbo/03.jpg" alt="" srcset=""></div>

          <div><img src="./img/lunbo/04.jpg" alt="" srcset=""></div>

          </div>

          <script>

          function task(){

          var show=document.querySelector("#slider>div.show");

          show.className="";

          if(show.nextElementSibling!==null)

          show.nextElementSibling.className="show";

          else

          show.parentNode.children[0].className="show";

          }

          setInterval(task,1000)

          </script>

          </body>

          </html>

          大家看到這些代碼是不是頭疼呢?這個代碼實現的效果請看 相關視頻

          同時希望大家給我的視頻點點贊和關注,以后將繼續發布一些程序類的視頻供大家一起學習進步!


          主站蜘蛛池模板: 国产精品美女一区二区| 成人中文字幕一区二区三区| 亚洲一区二区三区AV无码| 极品尤物一区二区三区| 国产大秀视频一区二区三区| 91视频一区二区| 制服中文字幕一区二区| 怡红院美国分院一区二区| 韩国美女vip福利一区| 99久久国产精品免费一区二区| 日本在线视频一区二区三区| 久久精品无码一区二区无码| 亚洲夜夜欢A∨一区二区三区| 一区二区三区精品高清视频免费在线播放 | 精品女同一区二区三区免费站| av无码人妻一区二区三区牛牛| 偷拍精品视频一区二区三区| 日韩免费无码一区二区视频| 无码乱码av天堂一区二区| 在线播放国产一区二区三区 | 国产剧情国产精品一区| 亚洲国产成人久久一区WWW| 日韩av片无码一区二区三区不卡 | 亚洲AV无码一区二区三区在线| 国产在线一区二区综合免费视频| 一区二区免费国产在线观看| 全国精品一区二区在线观看| 国产MD视频一区二区三区| 国产伦精品一区二区三区免费下载 | 精品国产AⅤ一区二区三区4区| 国产伦精品一区二区三区在线观看 | 精品国产不卡一区二区三区| 一区二区三区视频网站| 精品国产一区二区三区在线观看| 一区二区三区在线观看中文字幕 | 一区二区三区免费视频网站| 福利一区福利二区| 制服丝袜一区二区三区| 日韩好片一区二区在线看| 亚洲日韩中文字幕无码一区| 韩国资源视频一区二区三区|