首页 > 代码库 > 旋转木马特效
旋转木马特效
html部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/css.css"/>
<script type="text/javascript" src="http://www.mamicode.com/js/animate.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/my.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/slidepic1.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/slidepic2.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/slidepic3.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/slidepic4.jpg" /></a></li>
<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/slidepic5.jpg" /></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>
js部分
（animate.js插件）
indow.onload = function () {
//添加节流阀
var flag = true;//表示箭头可以点击
//找人
var wrap = document.getElementById("wrap");
var arrow = document.getElementById("arrow");
var arrRight = document.getElementById("arrRight");
var arrLeft = document.getElementById("arrLeft");
var slide = document.getElementById("slide");
var ul = slide.children[0];
var lis = ul.children;
//alert("引用成功");
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
];//其实就是一个配置单 规定了每张图片的大小位置层级透明度
//鼠标进过wrap 让箭头 显示出来
wrap.onmouseover = function () {
//让箭头 渐渐地 显示出来
animate(arrow, {"opacity": 1});//让箭头显示 是把透明度 从0变为1
}
//鼠标离开wrap 让箭头 隐藏
wrap.onmouseout = function () {
//让箭头 渐渐地 隐藏
animate(arrow, {"opacity": 0});//让箭头隐藏 就是把透明度 从1变为0
}
//让每一个li 渐渐地 各就各位
function assign() {
for (var i = 0; i < lis.length; i++) {
//lis[i]//每一个li
animate(lis[i], config[i], function () {
flag = true;//动画执行完成后 打开阀门
});
}
}
assign();
//点击右箭头 让li旋转 实际上是对配置单进行操作 然后再根据新的配置单去让li各就各位
//arr.push(arr.shift());
arrRight.onclick = function () {
if (flag) {//点击之后先判断 如果节流阀是打开的 才可以执行让图片旋转的代码
flag = false;//点击之后 立马把阀门关闭
config.push(config.shift());//把配置单的第一项放到最后
assign();
}
}
//点击左箭头 让li旋转 实际上是对配置单进行操作 然后再根据新的配置单去让li各就各位
//arr.unshift(arr.pop());
arrLeft.onclick = function () {
config.unshift(config.pop());
assign();
}
}
旋转木马特效