JS---案例：旋转木马
Posted jane_panyiyun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS---案例：旋转木马相关的知识，希望对你有一定的参考价值。
案例：旋转木马
页面加载时候出现的效果，script标签写在head里面，body上面
显示一个图片散开的动画，遍历之后，把每个图片用封装的动画函数移动到指定目标（同时改变多属性：宽，透明度，层级，top, left）
在做左右按钮点击事件。
右边按钮，用数组里面的push和shift，数组第一个去除加到最后一个位置
左边按钮，unshift最后一个pop到第一个
在很快点击的时候，会有混乱的情况（一个函数没执行完毕下一个执行全挤在一起）所以加了一个锁flag，保证一个函数执行完毕才进行下一个函数
分别添加进图片散开，左边按钮，右边按钮3个事件里面。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css(1).css" /> <script src="common.js"></script> <script> var config = [ { width: 400, top: 20, left: 50, opacity: 0.2, zIndex: 2 }, { width: 600, top: 70, left: 0, opacity: 0.8, zIndex: 3 }, { width: 800, top: 100, left: 200, opacity: 1, zIndex: 4 }, { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 }, { width: 400, top: 20, left: 750, opacity: 0.2, zIndex: 2 } ]; //页面加载的事件 window.onload = function () { var flag = true; //假设所有的动画执行完毕了---锁===================================== var list = my$("slide").getElementsByTagName("li"); //图片散开 function assign() { for (var i = 0; i < list.length; i++) { //设置每个li，用封装的animate函数，把宽，层级，透明度，left,top移动到制定的目标位置 animate(list[i], config[i], function () { flag = true; //============================================================== }) } }; assign(); //右边按钮 my$("arrRight").onclick = function () { if (flag) { //===================================================================== flag = false; config.push(config.shift()); assign();// 重新分配 } }; //左边按钮 my$("arrLeft").onclick = function () { if (flag) { flag = false; config.unshift(config.pop()); assign(); } }; //鼠标进入，左右焦点的div显示 my$("slide").onmouseover = function () { animate(my$("arrow"), { "opacity": 1 }); }; //鼠标离开，左右焦点的div隐藏 my$("slide").onmouseout = function () { animate(my$("arrow"), { "opacity": 0 }); }; }; </script> </head> <body> <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#"><img src="images/slidepic1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/slidepic2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/slidepic3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/slidepic4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/slidepic5.jpg" alt="" /></a></li> </ul> <div class="arrow" id="arrow"> <a href="javascript:;" class="prev" id="arrLeft"></a> <a href="javascript:;" class="next" id="arrRight"></a> </div> </div> </div> </body> </html>
以上是关于JS---案例：旋转木马的主要内容，如果未能解决你的问题，请参考以下文章