旋转木马特效实现原理及过程

最新推荐文章于 2021-10-10 13:47:11 发布

晴天sun

最新推荐文章于 2021-10-10 13:47:11 发布

阅读量6.3k

点赞数

分类专栏： JavaScript 文章标签： javascript特效 javascript 旋转木马特效运动函数

本文链接：https://blog.csdn.net/JiaJiaGan/article/details/69218687

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>
<script type="text/javascript" src="js/animate.js"></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>

<script src="../animate.js"></script>
<script>
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];//其实就是一个配置单规定了每张图片的大小位置层级透明度

var slide = document.getElementById("slide");

var ul = slide.children[0];

var lis = ul.children;

var arrow = document.getElementById("arrow");

var arrRight = arrow.children[1];

var arrLeft = arrow.children[0];

var wrap = document.getElementById("wrap");

//移入移出盒子显示arrow
wrap.onmouseover = function () {

animate(arrow, {"opacity": 1});

};

wrap.onmouseout = function () {

animate(arrow, {"opacity": 0});
};

change();

//通过变量去控制当前点击是否可以执行

var flag = true;

//点击右按钮
arrRight.onclick = function () {

if (flag) {

//点击以后首先设置不能再点了

flag = false;

//从config前面删除一个元素

var temp = config.shift();

//将删除的第一项放到最后

config.push(temp);

//配置单改变，我们需要让所有的li走到新的位置上

change();
}
};

//点击左侧
arrLeft.onclick = function () {

if (flag) {

flag = false;

var temp = config.pop();

config.unshift(temp);

//根据新的配置单让图片归位

change();
}
};


//这个函数是让每一个li运动到config中对应的位置

function change() {

//让每一个li运动到指定位置

for (var i = 0; i < lis.length; i++) {

//运动到哪

animate(lis[i], config[i], function () {

//是在运动完毕后触发
flag = true;
});
}
}

// 运动函数

function animate(tag,obj,Fn){

clearInterval(tag.timer);
tag.timer = setInterval(function(){
var flag = true;
for(var key in obj){

if(key == 'zIndex'){
tag.style[key] = obj[key];
}else if(key == 'opacity'){

var attr = key;
var target = obj[key] * 10;
var leader = getStyle(tag,attr)*10 || 0;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style[attr] = leader / 10;
}else{

var attr = key;
var target = obj[key];
var leader = parseInt(getStyle(tag,attr)) || 0;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style[attr] = leader + 'px';
}

if(leader != target){
flag = false;
}
}
if(flag){
clearInterval(tag.timer);
Fn && Fn();
}

},20);

</script>
</body>
</html>