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

时间:2022-09-09 16:22:36

代码如下:<!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)
}