原生態JS實現banner圖的常用所有功能


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

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

  1. banner圖循環不間斷切換

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

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

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

 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             #banner{
  8                 width: 716.8px;
  9                 height: 537.6px;
 10                 background-color: aquamarine;
 11                 margin: 100px auto;
 12                 position: relative;
 13                 font-size: 0px;        /*清除img圖片間的回車符產生的間隔*/
 14                 overflow: hidden;
 15             }
 16             #banner #bannerImg{
 17                 width: 100%;
 18                 position: absolute;
 19                 top: 0px;
 20                 left: 0px;
 21                 white-space: nowrap;    /*使這個圖片能一行顯示*/
 22                 transition:all 1s linear;
 23             }
 24             #banner #bannerImg .img{
 25                 width: 100%;
 26             }
 27             #banner #bannerButton{
 28                 font-size: 16px;
 29                 color: white;
 30                 position: absolute;
 31                 bottom: 10px;
 32                 left: 20px;
 33             }
 34             #banner #bannerButton .Button{
 35                 border-radius: 9px;
 36                 border: none;
 37                 outline: none;
 38                 cursor: pointer;
 39                 background-color: #7FFFD4;
 40             }
 41             #banner #bannerButtonAside .div1{
 42                 position: absolute;
 43                 right: 10px;
 44                 top: 50%;
 45                 margin-top: -32px;
 46                 cursor: pointer;
 47             }
 48             
 49             #banner #bannerButtonAside .div2{
 50                 position: absolute;
 51                 left: 10px;
 52                 top: 50%;
 53                 margin-top: -32px;
 54                 cursor: pointer;
 55             }
 56         </style>
 57     </head>
 58     <body>
 59         <!--實現 左右按鈕,1234,自動滑動,鼠標停上顯示小手不動 暫停。-->
 60         <section id="banner" onmouseover="changeStop()" onmouseout="changeStart()">
 61             
 62             <!--以下是我們的banner圖-->
 63             <div id="bannerImg">
 64                 <img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/>
 65                 <img class="img" src="../img/5f5bdebddd8f1d276aeac8af5f8fa38d.jpg"/>
 66                 <img class="img" src="../img/5f5e5c091ecb0525fc8204f200670dd9.jpg"/>
 67                 <img class="img" src="../img/efa11cad9094f951061ee21324277efe.jpg"/>
 68                 <img class="img" src="../img/0b54c021bd4384c168d835dfc0908018.jpg"/>
 69                 <img class="img" src="../img/25d10d413faca3bdd7e2d88667f4298f_看圖王.jpg"/>
 70                 <img class="img" src="../img/c95d7b9676ae739cccfc55457b93fe9c.jpg"/>    <!--第7張與第一張為同一圖片,消除圖片切換間斷-->
 71             </div>
 72             
 73             <!--以下是我們左下方的banner圖按鈕-->
 74             <div id="bannerButton">
 75                 <button class="Button" onclick="buttonChange(0)">1</button>
 76                 <button class="Button" onclick="buttonChange(1)">2</button>
 77                 <button class="Button" onclick="buttonChange(2)">3</button>
 78                 <button class="Button" onclick="buttonChange(3)">4</button>
 79                 <button class="Button" onclick="buttonChange(4)">5</button>
 80                 <button class="Button" onclick="buttonChange(5)">6</button>
 81             </div>
 82             
 83             <!--以下是我們左右兩個方向按鈕-->
 84             <div id="bannerButtonAside">
 85                 <div class="div1" onclick="asideChange(1)">
 86                     <img src="../img/forword.png"/>
 87                 </div>
 88                 <div class="div2" onclick="asideChange(0)">
 89                     <img src="../img/back.png"/>
 90                 </div>
 91             </div>
 92         </section>
 93     </body>
 94     
 95     <script type="text/javascript">
 96         var bannerImg=document.getElementById("bannerImg");    /*取出img容器的節點*/
 97         var Button=document.getElementsByClassName("Button");    /*取出所有的button按鈕*/
 98         var num=0;     /*定義全局變量num,控制banner的切換次序*/
 99         var aaa=0;     /*定義一個全局變量,用來取定時器函數,並在沒有鼠標事件的時候清除定時器*/
100             
101         /*通過定時器實現banner圖的每3000毫秒切換一次的效果的changeStart()函數*/
102         function changeStart(){
103                 aaa=setInterval(function(){
104                 if (num<=6) {
105                     bannerImg.style.transition="all 1s linear";
106                     bannerImg.style.left=(-716.8)*(num)+"px";
107                     num++;
108                 }else{
109                     bannerImg.style.transition="all 0s linear";        /*消除num=0時,bannerImg移動的過渡效果*/
110                     num=0;
111                     bannerImg.style.left=(-716.8)*(num)+"px";
112                     
113                 }
114                 console.log("哈哈哈繼續");
115             },3000)
116         }
117         changeStart();
118         
119         /*以下是當鼠標懸浮在banner圖上時,圖片停止自動切換的changeStop()函數*/
120         function changeStop(){
121             clearInterval(aaa);    
122             console.log("停止他");
123         }
124         
125         /*以下是點擊按鈕實現對應banner圖切換的change()函數*/
126         function buttonChange(Num){
127             num=Num+1;
128             bannerImg.style.transition="all 0s linear";
129             bannerImg.style.left=(-716.8)*(Num)+"px";
130         }
131         
132         /*以下是點擊左右兩個按鈕實現banner圖切換的buttonChange()函數*/
133         function asideChange(x){   /*通過傳遞形參x,判斷往左/往右切換banner圖*/
134             if (num!=6&&x==1) {
135                 num++;
136             }else if(num==6&&x==1){
137                 num=0;
138             }else if(num!=0&&x==0){
139                 num--;
140             }
141             else if(num==0&&x==0){
142                 num=5;
143             }
144             bannerImg.style.transition="all 0s linear";
145             bannerImg.style.left=(-716.8)*(num)+"px";
146         }
147     </script>
148 </html>

 

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

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

  如果存在錯誤,歡迎朋友們指出,我們一起探討,改良代碼!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM