javascript實現banner圖的常用功能

來源：懂視網責編：小OO 時間：2020-11-27 20:18:12

javascript實現banner圖的常用功能

雖然，用jQuery實現banner圖的各種效果十分簡單快捷，但是我今天用css+js代碼實現了幾個banner圖的常用功能，效果還不錯。此次，主要想實現以下功能。1.banner圖循環不間斷切換。2.通過自制按鈕實現指定性banner圖的切換。3.通過方向按鈕實現banner圖左/右定向依次切換。4.當banner圖存在onmouseover事件時，停止banner切換，當存在onmouseout時繼續切換。

推薦度：

點擊下載本文 文檔為doc格式

導讀雖然，用jQuery實現banner圖的各種效果十分簡單快捷，但是我今天用css+js代碼實現了幾個banner圖的常用功能，效果還不錯。此次，主要想實現以下功能。1.banner圖循環不間斷切換。2.通過自制按鈕實現指定性banner圖的切換。3.通過方向按鈕實現banner圖左/右定向依次切換。4.當banner圖存在onmouseover事件時，停止banner切換，當存在onmouseout時繼續切換。

這篇文章主要為大家詳細介紹了原JS實現banner圖的常用功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

雖然，用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 .p1{
 position: absolute;
 right: 10px;
 top: 50%;
 margin-top: -32px;
 cursor: pointer;
 }
 
 #banner #bannerButtonAside .p2{
 position: absolute;
 left: 10px;
 top: 50%;
 margin-top: -32px;
 cursor: pointer;
 }
 </style>
 </head>
 <body>
 <!--實現 左右按鈕，1234，自動滑動，鼠標停上顯示小手不動 暫停。-->
 <section id="banner" onmouseover="changeStop()" onmouseout="changeStart()">
 
 <!--以下是我們的banner圖-->
 <p 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張與第一張為同一圖片，消除圖片切換間斷-->
 </p>
 
 <!--以下是我們左下方的banner圖按鈕-->
 <p 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>
 </p>
 
 <!--以下是我們左右兩個方向按鈕-->
 <p id="bannerButtonAside">
 <p class="p1" onclick="asideChange(1)">
 <img src="../img/forword.png"/>
 </p>
 <p class="p2" onclick="asideChange(0)">
 <img src="../img/back.png"/>
 </p>
 </p>
 </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省事啦！

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com