JS---案例:旋转木马
程序员文章站
2023-09-29 08:05:57
案例:旋转木马 页面加载时候出现的效果,script标签写在head里面,body上面 显示一个图片散开的动画,遍历之后,把每个图片用封装的动画函数移动到指定目标(同时改变多属性:宽,透明度,层级,top, left) 在做左右按钮点击事件。 右边按钮,用数组里面的push和shift,数组第一个去 ......
案例:旋转木马
页面加载时候出现的效果,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>
上一篇: django跳转页面传参