JS---案例：旋转木马
程序员文章站
2022-05-29 08:07:05
案例：旋转木马 页面加载时候出现的效果，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>