效果圖:

-----------------------------------------html-------------------------------------------------

<div id="wrapper"><!-- 最外層部分 -->

            <div id="banner"><!-- 輪播部分 -->
                <ul class="imgList"><!-- 圖片部分 -->
                　　<li><a href="#">puss in
 
 boots1</a></li>
                　　<li><a href="#">puss in boots2</a></li>
                　　<li><a href="#">puss in boots3</a></li>
                　　<li><a href="#">puss in boots4</a></li>
                　　<li><a href="#">puss in
 
 boots5</a></li>
                </ul>

                <a href="javascript:void(0);" width="20px" height="40px" id="prev">《</a>
                <a href="javascript:void(0);" width="20px" height="40px" id="next">》</a>

                <div class="bg"></div> <!-- 圖片底部背景層部分-->
                <ul class="infoList"><!-- 圖片左下角文字信息部分 -->
                    <li class="infoOn">puss in
 
 boots1</li>
                    <li>puss in boots2</li>
                    <li>puss in boots3</li>
                    <li>puss in boots4</li>
                    <li>puss in boots5</li>
                </ul>
                <ul class="indexList"><!-- 圖片右下角序號部分 -->
                    <li class="indexOn">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>

-------------------------------------------css-----------------------------------------

　　body,div,ul,li,a,img{margin: 0;padding: 0;}
    ul,li{list-style: none;}
    a{text-decoration: none;}
 
    #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
    #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
    .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
    .imgList li{float:left;width:400px;height:200px;display: inline;}
    .imgList li:nth-child(1){background: #eee}
    .imgList li:nth-child(2){background: #6db2ec}
    .imgList li:nth-child(3){background: #6decac}
    .imgList li:nth-child(4){background: #ceec53}
    .imgList li:nth-child(5){background: #ec7653}
    #prev,
    #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);background: #eee;font-size: 30px}
    #prev{left: 10px;}
    #next{right: 10px;}
    #prev:hover,
    #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
    .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
    .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
    .infoList li{display: none;}
    .infoList .infoOn{display: inline;color: white;}
    .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
    .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
    .indexList .indexOn{background: red;font-weight: bold;color: white;}

-----------------------------------------------js----------------------------------------------

var curNum={
                curIndex:0,//當前index
                imgLen:$(".imgList li").length  //圖片總數
            }
            // 定時器自動變換2.5秒每次
            var autoChange = setInterval(function(){
                if(curNum.curIndex < curNum.imgLen-1){
                    curNum.curIndex ++;
                }else{
                    curNum.curIndex = 0;
                }
                //調用變換處理函數
                changeTo(curNum.curIndex); 
            },2500);
             
 
            //左箭頭滑入滑出事件處理
            $("#prev").hover(function(){
                //滑入清除定時器
                clearInterval(autoChange);
            },function(){
                //滑出則重置定時器
                autoChangeAgain();
            });
            //左箭頭點擊處理
            $("#prev").click(function(){
                //根據curIndex進行上一個圖片處理
                curNum.curIndex = (curNum.curIndex > 0) ? (--curNum.curIndex) : (curNum.imgLen - 1);
                changeTo(curNum.curIndex);
            });
             
            //右箭頭滑入滑出事件處理
            $("#next").hover(function(){
                //滑入清除定時器
                clearInterval(autoChange);
            },function(){
                //滑出則重置定時器
                autoChangeAgain();
            });
            //右箭頭點擊處理
            $("#next").click(function(){
                curNum.curIndex = (curNum.curIndex < curNum.imgLen - 1) ? (++curNum.curIndex) : 0;
                changeTo(curNum.curIndex);
            });
 
            //清除定時器時候的重置定時器--封裝
            function autoChangeAgain(){
                    autoChange = setInterval(function(){
                    if(curNum.curIndex < curNum.imgLen-1){
                        curNum.curIndex ++;
                    }else{
                        curNum.curIndex = 0;
                    }
                //調用變換處理函數
                    changeTo(curNum.curIndex); 
                },2500);
            }
             
            function changeTo(num){
                var goLeft = num *  400;
                $(".imgList").animate({left: "-" + goLeft + "px"},500);
                $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
                $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
            }
 
            //對右下角按鈕index進行事件綁定處理等
            $(".indexList").find("li").each(function(item){
                $(this).hover(function(){
                    clearInterval(autoChange);
                    changeTo(item);
                    curIndex = item;
                },function(){
                    autoChangeAgain();
                });
            });

參考:https://www.cnblogs.com/czh-520

輪播圖(jQuery)