您的位置：首页 > Web前端 > JavaScript

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

2017-04-04 23:20 260 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript特效 javascript 旋转木马特效运动函数

相关文章推荐

新的分享

章节导航