旋轉木馬輪播圖

代碼：

 <style>
        * {
            padding: 0;
            margin: 0;
        }
    
        ul {
            list-style: none;
        }
    
        img {
            display: block;
        }
    
        .box {
            width: 1200px;
            margin: 20px auto;
            height: 600px;
        }
    
        .slide {
            position: relative;
        }
    
        .slide li {
            position: absolute;
            width: 800px;
            top: 100px;
            left: 200px;
        }
    
        .slide img {
            height: auto;
            width: 100%;
        }
    
        .arrow {
            opacity: 0;
        }
    
        .prev, .next {
            position: absolute;
            top: 50%;
            width: 76px;
            height: 112px;
            z-index: 10;
        }
    
        .prev {
            background: url(beauty/prev.png) no-repeat;
            left: 100px;
        }
    
        .next {
            background: url(beauty/next.png) no-repeat;
            right: 100px;
        }
    
    </style>
    <div class="box" id="box">
        <div class="slide" id="slide">
            <ul>
                <li><img src="beauty/1.jpg" alt=""/></li>
                <li><img src="beauty/2.jpg" alt=""/></li>
                <li><img src="beauty/3.jpg" alt=""/></li>
                <li><img src="beauty/4.jpg" alt=""/></li>
                <li><img src="beauty/5.jpg" alt=""/></li>
            </ul>
        </div>
        <div class="arrow" id="arrow">
            <a href="javascript:;" class="prev" id="arrLeft"></a>
            <a href="javascript:;" class="next" id="arrRight"></a>
        </div>
    </div>
    <script>
        var config = [{
            width: 400,
            top: 20,
            left: 50,
            opacity: 0.2,
            zIndex: 2
        },//0
            {
                width: 600,
                top: 70,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            },//1
            {
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            },//2
            {
                width: 600,
                top: 70,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            },//3
            {
                width: 400,
                top: 20,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }//4
        ];
    
    
        //獲取樣式
        function getStyle(ele, attr) {
            return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] : ele.currentStyle[attr] || 0;
        }
        //多個屬性動畫函數
        function animate(ele, json, fn) {
            clearInterval(ele.timeId);
            ele.timeId = setInterval(function () {
                var flag = true;
                for (var attr in json) {
                    var target = json[attr];
                    if (attr == "opacity") {
                        var current = getStyle(ele, attr) * 100;
                        target *= 100;
                        var step = (target - current) > 0 ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
                        current += step;
                        ele.style.opacity = current / 100;
                    } else if (attr == "zIndex") {
                        ele.style.zIndex = json[attr];
                        current = json[attr];
                    } else {
                        var current = parseInt(getStyle(ele, attr));
                        var step = (target - current) > 0 ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
                        current += step;
                        ele.style[attr] = current + "px";
                    }
                    if (current != target) {
                        flag = false;
                    }
                    //console.log(target + "====" + attr + "==" + step + "===" + current + "====" + flag);
                }
                if (flag) {
                    clearInterval(ele.timeId);
                    if (fn) {
                        fn();
                    }
                }
            }, 20)
        }
    
        var liObjs = document.getElementById("slide").children[0].children;
        var flag = true;
    
    
        //界面加載時 圖片散開
        window.onload = function () {
            for (var i = 0; i < liObjs.length; i++) {
                animate(liObjs[i], config[i]);
            }
        };
    
        //按鈕的顯示和隱藏
    
        document.getElementById("box").onmouseover = function () {
    
                animate(document.getElementById("arrow"), {opacity: 1});
    
        };
        document.getElementById("box").onmouseout = function () {
                animate(document.getElementById("arrow"), {opacity: 0});
        };
    
        //分配函數
        function assign() {
            for (var i = 0; i < liObjs.length; i++) {
                animate(liObjs[i], config[i], function () {
                    flag=true;
                });
            }
        };
    
    
        //左邊點擊按鈕事件
        document.getElementById("arrLeft").onclick = function () {
            if (flag) {
                config.push(config.shift());
                assign();
            }
    
        };
    
    
        //右邊按鈕點擊事件
        document.getElementById("arrRight").onclick = function () {
            if (flag) {
                config.unshift(config.pop());
                assign();
            }
        };
    </script>

效果圖：