91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS如何實現banner圖的常用功能

發布時間:2021-04-23 11:40:35 來源:億速云 閱讀:268 作者:小新 欄目:web開發

這篇文章主要介紹JS如何實現banner圖的常用功能,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

js的作用是什么

1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies,包括創建和修改等。7、基于Node.js技術進行服務器端編程。

雖然,用jQuery實現banner圖的各種效果十分簡單快捷,但是我今天用css+js代碼實現了幾個banner圖的常用功能,效果還不錯。

此次,主要想實現以下功能:

  1. banner圖循環不間斷切換

  2. 通過自制按鈕實現指定性banner圖的切換

  3. 通過方向按鈕實現banner圖左/右定向依次切換

  4. 當banner圖存在onmouseover事件時,停止banner切換,當存在onmouseout時繼續切換

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #banner{
    width: 716.8px;
    height: 537.6px;
    background-color: aquamarine;
    margin: 100px auto;
    position: relative;
    font-size: 0px;  /*清除img圖片間的回車符產生的間隔*/
    overflow: hidden;
   }
   #banner #bannerImg{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    white-space: nowrap; /*使這個圖片能一行顯示*/
    transition:all 1s linear;
   }
   #banner #bannerImg .img{
    width: 100%;
   }
   #banner #bannerButton{
    font-size: 16px;
    color: white;
    position: absolute;
    bottom: 10px;
    left: 20px;
   }
   #banner #bannerButton .Button{
    border-radius: 9px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #7FFFD4;
   }
   #banner #bannerButtonAside .div1{
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -32px;
    cursor: pointer;
   }
   
   #banner #bannerButtonAside .div2{
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -32px;
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <!--實現 左右按鈕,1234,自動滑動,鼠標停上顯示小手不動 暫停。-->
  <section id="banner" onmouseover="changeStop()" onmouseout="changeStart()">
   
   <!--以下是我們的banner圖-->
   <div id="bannerImg">
    <img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/>
    <img class="img" src="../img/5f5bdebddd8f1d276aeac8af5f8fa38d.jpg"/>
    <img class="img" src="../img/5f5e5c091ecb0525fc8204f200670dd9.jpg"/>
    <img class="img" src="../img/efa11cad9094f951061ee21324277efe.jpg"/>
    <img class="img" src="../img/0b54c021bd4384c168d835dfc0908018.jpg"/>
    <img class="img" src="../img/25d10d413faca3bdd7e2d88667f4298f_看圖王.jpg"/>
    <img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/> <!--第7張與第一張為同一圖片,消除圖片切換間斷-->
   </div>
   
   <!--以下是我們左下方的banner圖按鈕-->
   <div id="bannerButton">
    <button class="Button" onclick="buttonChange(0)">1</button>
    <button class="Button" onclick="buttonChange(1)">2</button>
    <button class="Button" onclick="buttonChange(2)">3</button>
    <button class="Button" onclick="buttonChange(3)">4</button>
    <button class="Button" onclick="buttonChange(4)">5</button>
    <button class="Button" onclick="buttonChange(5)">6</button>
   </div>
   
   <!--以下是我們左右兩個方向按鈕-->
   <div id="bannerButtonAside">
    <div class="div1" onclick="asideChange(1)">
     <img src="../img/forword.png"/>
    </div>
    <div class="div2" onclick="asideChange(0)">
     <img src="../img/back.png"/>
    </div>
   </div>
  </section>
 </body>
 
 <script type="text/javascript">
  var bannerImg=document.getElementById("bannerImg"); /*取出img容器的節點*/
  var Button=document.getElementsByClassName("Button"); /*取出所有的button按鈕*/
  var num=0;  /*定義全局變量num,控制banner的切換次序*/
  var aaa=0;  /*定義一個全局變量,用來取定時器函數,并在沒有鼠標事件的時候清除定時器*/
   
  /*通過定時器實現banner圖的每3000毫秒切換一次的效果的changeStart()函數*/
  function changeStart(){
    aaa=setInterval(function(){
    if (num<=6) {
     bannerImg.style.transition="all 1s linear";
     bannerImg.style.left=(-716.8)*(num)+"px";
     num++;
    }else{
     bannerImg.style.transition="all 0s linear";  /*消除num=0時,bannerImg移動的過渡效果*/
     num=0;
     bannerImg.style.left=(-716.8)*(num)+"px";
     
    }
    console.log("哈哈哈繼續");
   },3000)
  }
  changeStart();
  
  /*以下是當鼠標懸浮在banner圖上時,圖片停止自動切換的changeStop()函數*/
  function changeStop(){
   clearInterval(aaa); 
   console.log("停止他");
  }
  
  /*以下是點擊按鈕實現對應banner圖切換的change()函數*/
  function buttonChange(Num){
   num=Num+1;
   bannerImg.style.transition="all 0s linear";
   bannerImg.style.left=(-716.8)*(Num)+"px";
  }
  
  /*以下是點擊左右兩個按鈕實現banner圖切換的buttonChange()函數*/
  function asideChange(x){ /*通過傳遞形參x,判斷往左/往右切換banner圖*/
   if (num!=6&&x==1) {
    num++;
   }else if(num==6&&x==1){
    num=0;
   }else if(num!=0&&x==0){
    num--;
   }
   else if(num==0&&x==0){
    num=5;
   }
   bannerImg.style.transition="all 0s linear";
   bannerImg.style.left=(-716.8)*(num)+"px";
  }
 </script>
</html>

  但是經過博主的測試,發現程序存在一定的瑕疵,第一張圖片的保留時間比其他圖片長,而且每次重新開啟定時器均存在這個問題。暫時博主還沒有比較簡單

省事的方法改良他,所以僅供參考思路,以后要用,當然還是jQuery省事啦!

以上是“JS如何實現banner圖的常用功能”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

三河市| 开江县| 武胜县| 乌兰察布市| 灵璧县| 抚顺县| 伽师县| 盐边县| 诸城市| 晋宁县| 余姚市| 军事| 南城县| 分宜县| 新和县| 彭泽县| 金昌市| 苍山县| 丰宁| 启东市| 湄潭县| 苏尼特右旗| 嵩明县| 久治县| 教育| 阜平县| 平舆县| 永兴县| 贵港市| 汕头市| 武鸣县| 宜黄县| 江都市| 千阳县| 洛隆县| 临武县| 方正县| 临泽县| 宁国市| 洛南县| 当涂县|