這篇文章主要介紹JS如何實(shí)現(xiàn)banner圖的常用功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專業(yè)領(lǐng)域包括成都網(wǎng)站制作、網(wǎng)站建設(shè)、商城網(wǎng)站建設(shè)、微信營銷、系統(tǒng)平臺(tái)開發(fā)， 與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

雖然，用jQuery實(shí)現(xiàn)banner圖的各種效果十分簡單快捷，但是我今天用css+js代碼實(shí)現(xiàn)了幾個(gè)banner圖的常用功能，效果還不錯(cuò)。

此次，主要想實(shí)現(xiàn)以下功能：

1. banner圖循環(huán)不間斷切換

2. 通過自制按鈕實(shí)現(xiàn)指定性banner圖的切換

3. 通過方向按鈕實(shí)現(xiàn)banner圖左/右定向依次切換

4. 當(dāng)banner圖存在onmouseover事件時(shí)，停止banner切換，當(dāng)存在onmouseout時(shí)繼續(xù)切換

 
  
  
  
   #banner{
    width: 716.8px;
    height: 537.6px;
    background-color: aquamarine;
    margin: 100px auto;
    position: relative;
    font-size: 0px;  /*清除img圖片間的回車符產(chǎn)生的間隔*/
    overflow: hidden;
   }
   #banner #bannerImg{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    white-space: nowrap; /*使這個(gè)圖片能一行顯示*/
    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;
   }