图片三维轮播

执行效果

html代码

<div class="banner">
    <div class="imglist" style="left: 300px;  top: 150px; z-index: 5">
        <img src="./0815/img/1.jpg" alt=""/>
    </div>
    <div class="imglist" style="left: 0;  top: 100px; z-index: 4">
        <img src="./0815/img/2.jpg" alt=""/>
    </div>
    <div class="imglist" style="left: 0;  top: 50px; z-index: 3">
        <img src="./0815/img/3.jpg" alt=""/>
    </div>
    <div class="imglist" style="left: 300px;  top: 0; z-index: 2">
        <img src="./0815/img/4.jpg" alt=""/>
    </div>
    <div class="imglist" style="left: 600px;  top: 50px; z-index: 3">
        <img src="./0815/img/5.jpg" alt=""/>
    </div>
    <div class="imglist" style="left: 600px;  top: 100px; z-index: 4">
        <img src="./0815/img/6.jpg" alt=""/>
    </div>
    <div class="dian">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

css样式

    body {
        background: #000;
    }

    .banner {
        margin: auto;
        position: relative;
        width: 1000px;
        height: 350px;
        border: 1px solid #fff;
    }

    .imglist {
        width: 400px;
        height: 200px;
        position: absolute;
        transition: all .1s linear;
    }

    .imglist img {
        width: 100%;
        height: 100%;
        box-shadow: 0 0 15px silver;
    }

    /*点 样式*/
    .dian {
        z-index: 10;
        position: absolute;
        left: 0;
        bottom: -40px;
        text-align: center;
        width: 100%;
    }

    .dian > div {
        width: 20px;
        height: 20px;
        border: 2px solid #fff;
        display: inline-block;
        box-sizing: border-box;
        border-radius: 50%;
    }

    /*点 选中后的效果*/
    .bgcolor {
        background: red;
    }

js代码

  <script>
    var list = document.getElementsByClassName("imglist");
    var dian = document.getElementsByClassName("dian")[0].children;
    var timer = null; /*清空计时器*/
    var index = 0;  /*初始化索引值变量*/
    var count = 0; /*用户鼠标点击 点 后旋转的圈数*/
    var isover=true;/*记录动画是否结束——修改bug*/

    /*动画效果——顺时针旋转+点的颜色动画*/
    function animation() {
        timer = setInterval(function () {
            shun_animation();
            addColor();
        }, 1000)
    }
    /*顺时针图片轮播——为了方便鼠标点击 点 后随影图片顺时针效果*/
    function shun_animation() {
        //        记录第0个元素的style
        var Zero = [list[0].style.left, list[0].style.top, list[0].style.zIndex];
        for (var i = 0; i < list.length; i++) {
            if (i < list.length - 1) {
                list[i].style.left = list[i + 1].style.left;
                list[i].style.top = list[i + 1].style.top;
                list[i].style.zIndex = list[i + 1].style.zIndex;
            }
            else {
                list[i].style.left = Zero[0];
                list[i].style.top = Zero[1];
                list[i].style.zIndex = Zero[2];
            }
            if (list[i].style.zIndex == 5) {/*获取当前最高层的索引*/
                index = i;
            }
        }
    }
    //    鼠标进入离开事件
    function Mouse() {
        for (var i = 0; i < list.length; i++) {
            list[i].onmouseenter = function () {
                //停止计时器
                clearInterval(timer);
            }
            list[i].onmouseleave = function () {
                animation();
            }
        }
    }
    //添加点的颜色
    function addColor() {/*封装后初始化调用 鼠标点击调用*/
        for (var i = 0; i < dian.length; i++) {
            if (i == index) {
                dian[i].className = "bgcolor";
            }
            else {
                dian[i].className = "";//classname js中严格区分大小写！！！
            }
        }
    }
    //进入点后的事件
    /*
     * 1. 进入离开后停止或继续动画效果
     * 2. 进入后颜色变化!!调用之前定义的添加颜色函数，对应上索引！
     * 3. 点对应图片变化
     * */
    function addDianevent() {
        for (var i = 0; i < dian.length; i++) {
            dian[i].index = i;/*记录索引*/
            /*鼠标进入事件*/
            dian[i].onmouseenter = function () {
                clearInterval(timer);/*在return 之前清除计时器，否则计时器累加*/
                if(isover){
                    isover=false;
                }
                else{
                    return;
                }

                count = this.index - index;
                /*???获取前一个的索引值*/
                    /*count可能为正  可能为负*/
                /* 1. 正值：顺时针动画 执行 dian.length-count次   负值：顺时针执行动画负数的绝对值次
                     * 2.  如果直接用for循环执行count次  动画效果太快，至少需要0.1秒
                     * 3.  用方法loop函数递归调用延迟输出后发现顺时针函数里还有addColor方法，重复调用,所以将addcolor方法写在animater函数中
                     * */

                    var x = 0;
                    if (this.index > index) {
                        x = dian.length - count;
                    }
                    else if (this.index < index) {
                        x = index - this.index;
                    }
//                递归控制旋转次数
                var num = 0;
                    loop();
                    function loop() {
                        num++;
                        if (num > x) {
                            console.log("动画完成");//动画完成后输出
                            isover = true;
                            return;
                        }
                        shun_animation();
                        setTimeout(loop, 100);
                    }
                index = this.index;
                /*当前点击索引赋值给变量*/
                addColor();/*变色*/
                }
            // 鼠标离开
            dian[i].onmouseleave = function () {
                animation();
            }
        }
    }
    /*浏览器加载事件*/
    window.onload = function () {
        animation();
        Mouse();
        addColor();
        addDianevent();
    }