轮播图动画效果实现-优快云博客

本文介绍了一种基于HTML和JavaScript实现的轮播图动画效果，通过调整图片的位置、大小和透明度等属性来实现流畅的过渡动画。此外，还实现了鼠标悬停时显示导航箭头的功能，并使用函数节流技术确保动画过程的平滑。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>
</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"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
</body>
</html>
<script src="js/animate.js" type="text/javascript"></script>
<script>
var wrap = document.getElementById("wrap");
var arrow = document.getElementById("arrow");
var slider = document.getElementById("slide");
var lis = slider.children[0].children;
var as = arrow.children;

wrap.onmouseover = function(){
animate(arrow,{opacity:100});
}
wrap.onmouseout = function(){
animate(arrow,{opacity:0});
}
var json = [
{
top:20,
left:50,
width:400,
opacity:20,
z:2

},
{
top:40,
left:0,
width:600,
opacity:80,
z:3

},
{
top:100,
left:200,
width:800,
opacity:100,
z:4

},
{
top:40,
left:600,
width:600,
opacity:80,
z:3

},
{
top:20,
left:750,
width:400,
opacity:20,
z:2

}];
//添加函数节流，动画不执行完毕，点击无动作
var jieliu = true;
for(var k in as){
as[k].onclick = function(){
if(this.className =="prev"){
if(jieliu == true){
change(true);//点击上一张，最后一张删除添加到第一张
jieliu = false;
}

}
else{
if(jieliu == true){
change(false);//点击下一张，第一张删除添加在最后一张
jieliu = false;
}

}
}
}
function change(flag){
if(flag){
json.unshift(json.pop());
}else{
json.push(json.shift());
}

for(var i =0; i<json.length;i++){
animate(lis[i],{
top:json[i].top,
left:json[i].left,
width:json[i].width,
opacity:json[i].opacity,
zIndex:json[i].z
},function(){ jieliu = true; });
}
}

</script>

//animate.js部分
/**
*
*/
// 多个属性运动框架添加回调函数
function animate(obj,json,fn) { // 给谁 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用来判断是否停止定时器一定写到遍历的外面
for(var attr in json){ // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长用 target 位置减去当前的位置除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // 数值
}
// console.log(current);
// 目标位置就是属性值
var step = ( json[attr] - current) / 10; // 步长用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity") // 判断用户有没有输入 opacity
{
if("opacity" in obj.style) // 判断我们浏览器是否支持opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}

if(current != json[attr]) // 只要其中一个不满足条件就不应该停止定时器这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单当定时器停止了。动画就结束了如果有回调，就应该执行回调
{
fn(); // 函数名 + （）调用函数执行函数
}
}
},10)
}
function getStyle(obj,attr) { // 谁的那个属性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
}
}