运动框架 ---- 旋转木马轮播图

代码如下：<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 0
        }

        body, button, input, select, textarea {
            font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
            color: #666;
        }

        ol, ul {
            list-style: none
        }

        a {
            text-decoration: none
        }

        fieldset, img {
            border: 0;
            vertical-align: top;
        }

        a, input, button, select, textarea {
            outline: none;
        }

        a, button {
            cursor: pointer;
        }

        #wrap {
            width: 1200px;
            margin: 100px auto;
        }

        #slide {
            height: 500px;
            position: relative;
        }

        #slide li {
            position: absolute;
            top: 0;
            left: 200px;
        }

        #slide li img {
            width: 100%;
        }

        #arrow {
            opacity: 0;
        }

        .prev, .next {
            width: 76px;
            height: 112px;
            position: absolute;
            top: 50%;
            margin-top: -56px;
            background: url("images/prev.png") no-repeat;
            z-index: 99;
        }

        .next {
            right: 0;
            background: url("images/next.png");
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="slide">
        <ul>
            <li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""></a></li>
            <li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""></a></li>
        </ul>
        <div id="arrow">
            <a href="javascript:void(0)" class="prev" id="arrLeft"></a>
            <a href="javascript:void(0)" class="next" id="arrRight"></a>
        </div>
    </div>
</div>
<script src="Move.js"></script>
<script !src="">
　　// 定义 li 的一些属性及值
    var config = [
        {
            width: 400,
            top: 20,
            left: 50,
            opacity: 20,
            zIndex: 2
        },//0
        {
            width: 600,
            top: 70,
            left: 0,
            opacity: 80,
            zIndex: 3
        },//1
        {
            width: 800,
            top: 100,
            left: 200,
            opacity: 100,
            zIndex: 4
        },//2
        {
            width: 600,
            top: 70,
            left: 600,
            opacity: 80,
            zIndex: 3
        },//3
        {
            width: 400,
            top: 20,
            left: 750,
            opacity: 20,
            zIndex: 2
        }//4

    ];
　　// 保证动画执行完毕再执行下一次动画 var flag = true;
　　// 定义自动播放的 timer 
    var timer = null;
    var lis = document.getElementsByTagName('li');
　　// 循环执行 li 初始化各项属性
    function assign() {
        for (var i = 0; i < lis.length; i++) {
            Move(lis[i], config[i], function () {
                flag = true;
            })
        }
    }

    assign();
　　// 向左执行动画
    function changeImgLeft() {
        if (flag) {
            flag = false; // 每次动画执行完毕，flag 重新赋值
            config.unshift(config.pop()); // 将数组对象的最后一项添加到头部
            assign();
        }
    }
　　// 向右执行动画
    function changeImgRight() {
        if (flag) {
            flag = false;
            config.push(config.shift()); // 将数组对象的第一项添加到尾部
            assign();
        }
    }
　　// 定义自动播放函数 
    function autoPlay() {
　　　　　// 清除上一次动画
        clearInterval(timer);
        timer = setInterval(function () {
            changeImgLeft();
        }, 3000)
    }

    autoPlay();
　　// 鼠标进入，停止自动播放，左右焦点显示　
    $("slide").onmouseover = function () {
        clearInterval(timer);
        Move($("arrow"), {"opacity": 100});
    };
    //鼠标离开,执行自动播放，左右焦点的div隐藏
    $("slide").onmouseout = function () {
        autoPlay();
        Move($("arrow"), {"opacity": 0});
    };

    $('arrLeft').onclick = function () {
        changeImgLeft();
    }
    $('arrRight').onclick = function () {
        changeImgRight();
    }

</script>
</body>
</html>

这里是 Move.js :

// 获取 id 的 元素的函数

function $(id) {

    return document.getElementById(id);
}

// 获取非行间样式函数

function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, null)[name];
    }
}

// 运动函数

function Move(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var flag = true;
        for (var arr in json) {
            var offsetValue = arr == 'opacity' ? Math.round(parseFloat(getStyle(obj, arr)) * 100) : parseInt(getStyle(obj, arr));
            var target = parseInt(json[arr]);
            var speed = (target - offsetValue) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            offsetValue += speed;
            if (arr == 'opacity') {
                obj.style.opacity = offsetValue / 100;
            } else if (arr == 'zIndex') {
                obj.style.zIndex = json[arr];
            } else {
                obj.style[arr] = offsetValue + 'px';
            }
            if (target != offsetValue) {
                flag = false;
            }
        }
        if (flag) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }


    }, 20)
}

秒客网

运动框架 ---- 旋转木马轮播图

相关文章