當前位置 主頁 > 網站技術 > 代碼類 > 最大化 縮小

    JS實現普通輪播圖特效

    欄目:代碼類 時間:2020-01-01 18:09

    本文實例為大家分享了JS實現輪播圖特效的具體代碼,供大家參考,具體內容如下

    知識點

    輪播圖思想:

    ① 建立一個全局變量索引,始終標記當前顯示圖片。
    ② 根據當前圖片的數量,動態創建下方的●圖片指示器。
    ③ 輪播圖的初始狀態為第一張圖片在中間,剩余所有圖片均放在即將顯示圖片位置。
    ④ 當點擊>的時候,當前圖片調用動畫移動函數進行左移,與此同時新的一張圖片調用動畫函數移入到div中,而會將下一張展示的圖片移動到div右側。
    ⑤ 需要進行邊界判斷,如果當前的圖片大于圖片數量或者小于等于0,重新給索引賦值。
    ⑥ 當點擊圖片指示器的時候,首先判定點擊的與索引的位置關系,然后進行動畫移動。
    ⑦ 給div添加定時器,自動移動圖片。當鼠標進入div,刪除定時器,當鼠標移出div,設置定時器。

    運行效果

    1.自動輪播
    2.點擊左右切換圖片
    3.點擊下方圖片指示器切換圖片

    代碼

    引入MyTools.js庫

    1.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="1.css" rel="external nofollow" >
    </head>
    <body>
    <div >
     <div >
     <div class="box_img"><img src="casual01.jpg" alt=""></div>
     <div class="box_img"><img src="casual02.jpg" alt=""></div>
     <div class="box_img"><img src="casual03.jpg" alt=""></div>
     <div class="box_img"><img src="casual04.jpg" alt=""></div>
     <div class="box_img"><img src="casual05.jpg" alt=""></div>
     </div>
     <div >
     <a href="javascript:;" class="box_control_left"><i><</i></a>
     <a href="javascript:;" class="box_control_right"><i>></i></a>
     <ul>
     </ul>
     </div>
    </div>
    <script src="../JavaScript學習/00MyTools/MyTools.js"></script>
    <script src="1.js"></script>
    </body>
    </html>

    2.css

    *{margin: 0;padding: 0;}
    a{
     color: #999;
     text-decoration: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background-color: rgba(0, 0, 0, .4);
    }
    a:hover{
     color: #f8b62b;
    }
    i{
     font-size: 50px;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    #box{
     height: 482px;
     width: 830px;
     background-color: red;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     overflow: hidden;
    }
    #box_content{
     height: 100%;
     width: 100%;
     cursor: pointer;
    }
    #box_content img{
     position: absolute;
     vertical-align: top;
     height: 100%;
     width: 100%;
     /*left: 830px;*/
    }
    .box_img{
     width: 100%;
     height: 100%;
     position: absolute;}
    .box_control_right{
     position: absolute;
     right: 0;
    }
    .box_control_left{
     position: absolute;
     left: 0;
    }
    ul{
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     justify-content:space-evenly;
    }
    ul>li{
     list-style: none;
     width: 16px;
     height: 16px;
     background-color: #fff;
     margin: 0 3px;
     border-radius: 50%;
     cursor: pointer;
    }
    ul>li.current{
     background-color: darkorange;
    }
    
    下一篇:沒有了
青海十一选五开奖数据