先上效果圖（給美宅瘋狂打call~）

是不是你們要找的效果，是的話就繼續往下看hahaha

上重點（敲黑板）！！！
js

 <script>
        $(function () {
            var containli=$('.contain > li');/*獲取背景圖的li標籤*/
            var index=containli.index();/*獲取顯示的li標籤的索引*/
            var count=containli.length;/*獲取li標籤的個數*/
            var btnli =$('.btn > li'
 
);/*獲取數字的li標籤*/

            var left=$('#left');/*獲取上一張的按鈕*/
            var right=$('#right');/*獲取下一張的按鈕*/

            /*改變containli標籤中的圖片和btnli標籤中的樣式的事件*/
            function changeImg(index){
                containli.eq(index).fadeIn().siblings('li').fadeOut();
                btnli.eq(index).addClass('selectBtn'
 
).siblings('li').removeClass('selectBtn');
            }
            /*上一張的按鈕點選事件*/
            left.click(function () { 
                 index--;//索引自減
                 if (index<0){ //判斷索引是否越界
                     index=count-1;/*越界就初始化一個值*/
                 }
                  changeImg(index);/*改變containli標籤中的圖片和btnli標籤中的樣式*/
 

            });
            /*下一張的按鈕點選方法*/
            right.click(function () {
                 rightImg();
            });
            /*下一張圖片（自動播放）*/
            function rightImg() {
                index++;//索引自增
                if (index>=count){
                    index=0;/**/
                }
                changeImg(index);
            }
            /*滑鼠懸停改變containli標籤中的圖片和btnli標籤中的樣式*/
            btnli.hover(function () {
                 index=$(this).index();/*獲取滑鼠懸停所在的btnli標籤索引*/
                 changeImg(index);
            });

            play();/*開始播放*/

            /*迴圈輪播*/
            function play(){ 
                time=setInterval(rightImg,1000);/*迴圈輪播時間和事件*/
            }
            /*停止輪播*/
            function stop() {
                clearInterval(time);
            }

           /*滑鼠移入停止輪播*/
            $('.contain').mouseover(function () { 
                stop();
            });
            /*滑鼠移出開始輪播*/
            $('.contain ').mouseout(function () {
                play();
            });
            $('span').mouseover(function () {
                stop();
            });
            $('span').mouseout(function () {
                play();
            });
            $('.btn').mouseover(function () {
                stop();
            });
            $('.btn').mouseout(function () {
                play();
            });

        });
    </script>

記得引入js檔案

<script src="js/jquery.min.js"></script>

再上html

<div id="carousel">
    <!--背景圖-->
    <ul class="contain">
        <!--圖片不平鋪，居中-->
        <li style="background: url('img/A1.jpg') no-repeat center"></li>
        <li style="background: url('img/A2.jpg') no-repeat center"></li>
        <li style="background: url('img/A3.jpg') no-repeat center"></li>
    </ul>
   <!--數字-->
    <ul class="btn">
        <li class="selectBtn">
            <img src="img/1.png">
        </li>
        <li><img src="img/2.png"></li>
        <li><img src="img/3.png"></li>
    </ul>
    <!--左右-->
    <span id="left">&lt;</span>
    <span id="right">&gt;</span>
</div>

最後上樣式css

 body,ul{/*消除瀏覽器預設的間隔*/
            margin: 0;
            padding: 0;
        }
        ul{ list-style: none;}
        #carousel{
            position: relative;
            width: 100%;
            height: 500px;
            overflow: hidden;/*超過範圍，隱藏多餘的內容*/
            z-index: 8;
            margin-top: 100px;
        }
        .contain li{
            height: 500px;
            z-index: 10;
        }
        .btn{
            position: absolute;
            display: inline-block;
            top: 450px;
            left:48%;
        }
        .btn li{
            cursor: pointer;/*滑鼠箭頭*/
            display: inline-block;
            line-height: 13px;
            width: 13px;
            height: 13px;
            text-align: center;
            z-index: 11;
            margin: 0 10px;/*圖示之間的距離*/
        }
        .btn .selectBtn{/*當前圖片的圖示*/
            background-color: blue;
        }
        span{
            display: inline-block;
            text-align: center;
            font-size: 80px;
            font-weight: 700;
            opacity: 0.1; /*透明度*/
            cursor: pointer;
        }
        span:hover {
            opacity: 0.7;
        }
        #left {
            position: absolute;
            top: 150px;
            left: 100px;
            z-index: 12;
        }
        #right {
            position: absolute;
            top: 150px;
            right: 100px;
            z-index: 12;
        }

大功告成，把圖片換成你自己的就可以用了。

最後的最後再留點小筆記
1.eq()的使用方法
$(“body”).find(“div”).eq(2).addClass(“blue”);
意義：先在“body”裡面找到“div”元素，再找到和“div”同級的第二個“div“（由於.ep（）的索引是從0開始的，eq（2）就是找到第三個元素）

2.siblings()遍歷
3.fadeOut（） fadeIn（）淡入淡出

4.setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式
setInterval(code,millisec[,”lang”])
code-要呼叫的函式或要執行的程式碼串。
millisec-週期性執行或呼叫 code 之間的時間間隔，以毫秒計。

setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數

是不是很完美