运动框架 ---- 旋转木马轮播图
代码如下：<!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)
}
