使用js实现轮播图

• CSS代码：

*{
            margin: 0;
            padding: 0;
        }
        #picBox{
            position: relative;
            margin: 30px;
            width: 184px;
            height: 147px;
        }
        #picBox a{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        #picBox .show{
            display: block;
        }
        .choice{
            position: absolute;
            bottom: 5px;
            left: 50%;
            margin-left: -26px;
        }
        .choice li{
            list-style: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            display: inline-block;
            background: #fff;
            cursor: pointer;
        }
        .active{
            /* 【!important】  给一个样式加一个最高级 */
            background: red !important;
        }
        .left{
            width: 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #999;
            color: #fff;
            opacity: 0.9;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -15px;
            cursor: pointer;
        }
        .right{
            width: 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #999;
            color: #fff;
            opacity: 0.9;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -15px;
            cursor: pointer;
        }

• body代码：

<div id="picBox">
        <a href="" class="show">
            <img src="./img/1.png" alt="">
        </a>
        <a href="">
            <img src="./img/2.png" alt="">
        </a>
        <a href="">
            <img src="./img/3.png" alt="">
        </a>
        <ul class="choice">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
        <div class="left"><</div>
        <div class="right">></div>
    </div>

• js代码：

<script>
        // 当前显示的图片的索引为0
        var ind=0;
        $(".choice li").click(function(){
            // 选中当前选中的那个li的索引
            var index=$(this).index();
            // 【同步】(index 和 ind)两个索引
            ind=index;
            // // $(".choice li").eq(index)  等同于 $(this)
            // // siblings() 子节点
            // $(this).addClass("active").siblings("li").removeClass("active");
            // // 层级关系    eq() 当前选中的值 
            // $("#picBox a").eq(index).fadeIn(1000).siblings("a").fadeOut(1000);
            show(ind);
        });

        // 全局变量 才能为空!!!
        var timer=null;
        function showImg(){
            // 定时器
            timer = setInterval(function(){
                ind++;
                // 如果ind大于a标签的额最大值，强制性从0开始执行
                if(ind > $("#picBox a").length-1 ){
                    // 本来(index 和 ind)两个索引不同步
                    ind=0;
                }
                // // siblings() 子节点   eq(ind) 当前的某个位置
                // $(".choice li").eq(ind).addClass("active").siblings("li").removeClass("active");
                // // 层级关系
                // $("#picBox a").eq(ind).fadeIn(1000).siblings("a").fadeOut(1000);
                show(ind);
            }, 5000);
        }
        // 注意下面的函数的执行顺序!!!
        showImg();

        // 鼠标移入事件
        $("#pocBox").mouseover(function(){
            // 清空定时器
            clearInterval(timer);
        });
        // 鼠标移出事件
        $("#pocBox").mouseout(function(){
            // 执行方法
            showImg();
        });

        // 上一张图片
        $(".left").click(function(){
            ind--;
            if(ind < 0 ){
                // 本来(index 和 ind)两个索引不同步
                ind=$(".choice li").length-1;
            }
            // // siblings() 子节点   eq(ind) 当前的某个位置
            // $(".choice li").eq(ind).addClass("active").siblings("li").removeClass("active");
            // // 层级关系
            // $("#picBox a").eq(ind).fadeIn(1000).siblings("a").fadeOut(1000);
            show(ind);
        });
        // 下一张
        $(".right").click(function(){
            ind++;
            if(ind > $(".choice li").length-1 ){
                // 本来(index 和 ind)两个索引不同步
                ind=0;
            }
            // // siblings() 子节点   eq(ind) 当前的某个位置
            // $(".choice li").eq(ind).addClass("active").siblings("li").removeClass("active");
            // // 层级关系
            // $("#picBox a").eq(ind).fadeIn(1000).siblings("a").fadeOut(1000);
            show(ind);
        });

        // 优化,抽取共同的代码
        function show(ind){
            // siblings() 子节点   eq(ind) 当前的某个位置
            $(".choice li").eq(ind).addClass("active").siblings("li").removeClass("active");
            // 层级关系
            $("#picBox a").eq(ind).fadeIn(1000).siblings("a").fadeOut(1000);
        }
    </script>

• 效果图
  
  【注意：引用js文件】