運動框架 ---- 旋轉木馬輪播圖

時間 2019-11-10

標籤運動框架旋轉木馬简体版

原文原文鏈接

代碼以下：<!DOCTYPE html>javascript

<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)}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。