JS---案例：旋转木马
2021-05-08 02:28
标签：row index 动画 ssi script opacity body ext 属性 页面加载时候出现的效果，script标签写在head里面，body上面 显示一个图片散开的动画，遍历之后，把每个图片用封装的动画函数移动到指定目标（同时改变多属性：宽，透明度，层级，top, left） 在做左右按钮点击事件。 右边按钮，用数组里面的push和shift，数组第一个去除加到最后一个位置 左边按钮，unshift最后一个pop到第一个 在很快点击的时候，会有混乱的情况（一个函数没执行完毕下一个执行全挤在一起）所以加了一个锁flag，保证一个函数执行完毕才进行下一个函数 分别添加进图片散开，左边按钮，右边按钮3个事件里面。 JS---案例：旋转木马 标签：row index 动画 ssi script opacity body ext 属性 原文地址：https://www.cnblogs.com/jane-panyiyun/p/12083075.html案例：旋转木马
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>