運動框架 ---- 旋轉木馬輪播圖
阿新 • • 發佈：2018-12-17
程式碼如下：<!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)
}