淡入淡出轮播插件（Js）

1. 该插件由轮播图片、向前向后按钮及底部分页器3部分组成
2. 首先，搭建页面dom结构，href="javascript:void(0)表示a标签不跳转，保留样式，不做任何操作

<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>
    <!-- 分页器 -->
    <ul class="bullet">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

3. 再看下样式的写法，值得注意的是2个居中写法

<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 {
        /* 相对.carousel垂直方向的50%，再减去自身高度一半，实现上下居中 */
        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 {
        /* 相对.carousel水平方向的50%，再使用translate让自己向左平移自身宽度的50%，实现水平居中 */
        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. 最后看逻辑部分，大致功能有：向前向后按钮的点击操作（显示下一张和上一张），底部分页器的点击操作（点击分页器显示与之下标对应的图片），自动轮播的功能

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

    var curIdx = 0,
        isFade = false;         // 设置动作锁，防止用户频繁点击频繁执行，浪费性能

    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()的功能是传哪个下标就显示哪张图片
    // 将curIdx的图片淡出，idx的图片淡入
    // 同时设置底部分页器对应显示样式
    function play (idx) {
        // 先判断动作锁是否开启，如果已开启表示轮播动作正在执行，则不重复执行
        if(isFade) return;   
        // 如果轮播动作未执行，则修改动作锁表示开始执行       
        isFade = true;
        $items.eq(curIdx).fadeOut(500);
        $items.eq(idx).fadeIn(500,function(){
            // 轮播动作执行结束后继续加上动作锁
            isFade = false;
        })
        curIdx = idx;
        setBullet();
    }
    function playNext (){
        // 显示下一张其实就是 play(idx+1)，但要将idx+1的值控制在图片数量范围内
        play( (curIdx + 1) % imgCount );
    }
    function playPre (){
        // 显示上一张，play(idx-1)，计算方式同上
        play( (imgCount + curIdx - 1) % imgCount );
    }
    function setBullet (){
        $bullet.find('li')
                   .removeClass('active')
                   .eq(curIdx).addClass('active');
    }
    function autoPlay (){
        setInterval(function(){
            playNext();
        },2000)
    }
</script>