設計：

根據上圖可以看出，輪播圖需要以下元素：外面的盒子div、放置圖片集合的盒子ul、放置兩側按鈕的盒子div、下側順序按鈕div

原始碼如下：

一、html原始碼如下：

<div class="outer">

    <ul class="img">
        <li><a><img src="../static/img/1.jpg"></a></li>
        <li><a><img src="../static/img/2.jpg"></a></li>
        <li><a><img src="../static/img/3.jpg"></a></li>
        <li><a><img src="../static/img/4.jpg"></a></li>
    </ul>


    <ul class="num">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <div class="left_btn btn"><</div>
    <div class="right_btn btn">></div>
</div>

二、css樣式實現：

<style>
    /*去掉預設瀏覽器樣式*/
    *{
        margin: 0;
        padding: 0;
    }
      /*去掉li標籤預設樣式*/
   li{
       list-style: none;
   }
     /*最外層盒子樣式處理：
     1.設定與輪播圖高寬一致
     2.設定縱向距頂部50px，水平居中
     3.設定自己為固定位置
     */
    .outer{
        height: 470px;
        width: 590px;
        margin: 50px auto;
        position:relative;
    }
      /*輪播圖片集合處理:
      1.將其設定為脫離文件流
      2.設定距頂部和左側都為0
      */
    .img li{
        position: absolute;
        top: 0;
        left: 0;
    }
      /*順序按鈕區域處理：
      1.設定脫離文件流
      2.通過設定text-align、width使其整體水平居中
      3.設定距離底部20px
      */
    .num{
        position: absolute;
        text-align: center;
        width: 100%;
        bottom: 20px;
    }
   /*順序按鈕處理:
      1.將其設定為行級及塊級相容顯示
      2.設定其寬高
      3.設定背景色及字型顏色
      4.設定字型水平居中
      5.通過設定line-height與height一致，使其字型縱向居中
      6.設定其樣式為圓形
      7.增加按鈕左右間距
      */
    .num li{
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: darkgray;
        color: white;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        margin: 0 20px;
    }
     /*左、右按鈕相同部分處理:
      1.設定其脫離文件流
      2.設定其寬高
      3.設定背景色及字型顏色
      4.設定字型水平居中
      5.通過設定line-height與height一致，使其字型縱向居中
      6.通過設定top、margin-top使其整體縱向居中
      7.預設不顯示
      */
    .btn{
        position: absolute;
        width: 20px;
        height: 50px;
        background-color: darkgray;
        color: white;
        text-align: center;
        line-height: 50px;
        top: 50%;
        margin-top: -25px;
        display: none;
    }
      /*左側按鈕處理:
      設定左側為0
      */
    .left_btn{
        left: 0;
    }
     /*右側按鈕處理:
      設定右側為0
      */
    .right_btn{
        right: 0;
    }
     /*滑鼠懸浮至輪播圖區域時左、右按鈕處理:
      1.設定左右按鈕顯示樣式為行級塊級相容
      2.設定滑鼠放置在左右按鈕時樣式為小手
      */
    .outer:hover .btn{
        display: inline-block;
        cursor: pointer;
    }
     /*設定順序按鈕初始按鈕樣式:
      設定為紅色（由於樣式級別問題會導致設定無效，可通過兩種方式解決：
      1.後面加上!important
      2.將css定位寫詳細，比如：.outer .num .current{……
      ）
      */
    .current{
        background-color: red!important;
    }

</style>

三、JQuery實現：

<script src="../static/jquery-3.3.1.min.js"></script>
<script>
     /*定義位置：由於圖片個數與下側順序按鈕數量一致，可通過位置進行關聯*/
    var index=0;
     /*當滑鼠放到順序按鈕上時：
     1.將當前這個順序按鈕增加樣式為紅色背景
     2.移除周圍其他同級元素紅色背景樣式
     3.獲取當前順序按鈕的index
     4.通過index獲取該位置圖片
     5.一秒鐘漸入該圖片
     6.一秒鐘漸出其他相鄰圖片
     7.防止移動過快導致的效果閃現，使用stop方法
     */
    $(".num li").mousemove(function () {
            $(this).addClass("current").siblings().removeClass("current");
            index=$(this).index();
            $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    });
     /*設定每一秒鐘自動輪播：
     1.獲取當前位置序號：自加操作；當超過圖片最大序號時序號設定為0
     2.設定下側順序按鈕及輪播圖顯示
     */
    var time=setInterval(move,1000);
    function move() {
        index++;
        if (index==4){
            index=0
        }
        $(".num li").eq(index).addClass("current").siblings().removeClass("current");
        $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    };
    /*當滑鼠劃入、劃出輪播圖區域時：
    1.劃入時停止自動輪播
    2.劃出時繼續自動輪播
    */
    $(".outer").hover(function () {
        clearInterval(time);
    },
    function () {
        time=setInterval(move,1000);
    });
     /*點選右側按鈕時執行*/
    $(".right_btn").click(function () {
       move();
    });
     /*點選左側按鈕時執行*/
    function moveL() {
         index--;
        if (index==-1){
            index=3
        }
        $(".num li").eq(index).addClass("current").siblings().removeClass("current");
        $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
    }
    $(".left_btn").click(function () {
        moveL();
    });
</script>