1. 該插件由輪播圖片、向前向后按鈕及底部分頁(yè)器3部分組成
2. 首先，搭建頁(yè)面dom結(jié)構(gòu)，href="javascript:void(0)表示a標(biāo)簽不跳轉(zhuǎn)，保留樣式，不做任何操作

<div class="carousel">
    <!-- 輪播圖片 -->
    <ul class="items">
        <li>
            <a href="javascript:void(0)">
                <img src="imgs/26.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                <img src="imgs/25.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                <img src="imgs/24.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                <img src="imgs/23.jpg" alt="">
            </a>
        </li>

    </ul>
    <!-- 向前向后按鈕 -->
    <a href="javascript:void(0)" class="pre"><</a>
    <a href="javascript:void(0)" class="next">></a>
    <!-- 分頁(yè)器 -->
    <ul class="bullet">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

3. 再看下樣式的寫(xiě)法，值得注意的是2個(gè)居中寫(xiě)法

<style>
    /* reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    li {
        list-style: none;
    }
    a {
        text-decoration: none;
    }

    .carousel {
        position: relative;
        width: 480px;
        height: 360px;
        margin: 20px auto;
        overflow: hidden;
    }
    .pre,
    .next {
        /* 相對(duì).carousel垂直方向的50%，再減去自身高度一半，實(shí)現(xiàn)上下居中 */
        position: absolute;
        top: 50%;
        margin-top: -25px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        opacity: .8;
    }
    .pre:hover,
    .next:hover {
        font-size: 60px;
    }
    .pre {
        left: 10px;
    }
    .next {
        right: 10px;
    }
    .bullet {
        /* 相對(duì).carousel水平方向的50%，再使用translate讓自己向左平移自身寬度的50%，實(shí)現(xiàn)水平居中 */
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%);
    }
    .bullet li {
        display: inline-block;
        width: 16px;
        height: 4px;
        background: #fff;
        cursor: pointer;
    }
    .bullet li.active {
        background: #666;
    }
</style>

4. 最后看邏輯部分，大致功能有：向前向后按鈕的點(diǎn)擊操作（顯示下一張和上一張），底部分頁(yè)器的點(diǎn)擊操作（點(diǎn)擊分頁(yè)器顯示與之下標(biāo)對(duì)應(yīng)的圖片），自動(dòng)輪播的功能

<script>
    var $pre = $(".pre"),
        $next = $(".next"),
        $bullet = $(".bullet"),
        $items = $(".items").children(),
        imgCount = $items.length;

    var curIdx = 0,
        isFade = false;         // 設(shè)置動(dòng)作鎖，防止用戶(hù)頻繁點(diǎn)擊頻繁執(zhí)行，浪費(fèi)性能

    play(0);
    autoPlay();

    $pre.on('click',function(){
        playPre ();
    })

    $next.on('click',function(){
        playNext();
    })

    $bullet.find('li').on('click',function(){
        var thisIdx = $(this).index();
        play(thisIdx);
    })

    // play()的功能是傳哪個(gè)下標(biāo)就顯示哪張圖片
    // 將curIdx的圖片淡出，idx的圖片淡入
    // 同時(shí)設(shè)置底部分頁(yè)器對(duì)應(yīng)顯示樣式
    function play (idx) {
        // 先判斷動(dòng)作鎖是否開(kāi)啟，如果已開(kāi)啟表示輪播動(dòng)作正在執(zhí)行，則不重復(fù)執(zhí)行
        if(isFade) return;   
        // 如果輪播動(dòng)作未執(zhí)行，則修改動(dòng)作鎖表示開(kāi)始執(zhí)行       
        isFade = true;
        $items.eq(curIdx).fadeOut(500);
        $items.eq(idx).fadeIn(500,function(){
            // 輪播動(dòng)作執(zhí)行結(jié)束后繼續(xù)加上動(dòng)作鎖
            isFade = false;
        })
        curIdx = idx;
        setBullet();
    }
    function playNext (){
        // 顯示下一張其實(shí)就是 play(idx+1)，但要將idx+1的值控制在圖片數(shù)量范圍內(nèi)
        play( (curIdx + 1) % imgCount );
    }
    function playPre (){
        // 顯示上一張，play(idx-1)，計(jì)算方式同上
        play( (imgCount + curIdx - 1) % imgCount );
    }
    function setBullet (){
        $bullet.find('li')
                   .removeClass('active')
                   .eq(curIdx).addClass('active');
    }
    function autoPlay (){
        setInterval(function(){
            playNext();
        },2000)
    }
</script>