JavaScript实现图片幻灯片滚动播放动画效果
by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=288
想必大多数的互联网用户都访问过迅雷的首页，在迅雷首页视觉最集中，关注度最高的区域就是一个图片切换滚动播放的动画效果。可参见下面的截图：
早在去年，我js还相当稚嫩的时候，曾试图手写上图所示的效果（您可以单击这里访问迅雷首页），但是无法妥善的处理定时器，结果效果不佳，最后放弃。后来也没有再研究这种效果，知识是不断积累的，前两天再次想到试试实现这种效果，发现很轻松了。这类效果的应用在网页上是很常见的，有一类效果很不错的是js+as也就是JavaScript+flash的实现，但是一般这类动画总是占据网页最重要的位置，使用flash做载体遭遇未安装flash插件的用户效果大打折扣，在大型网站上，多使用纯粹的JavaScript实现这类效果。
在本文中所展示的这个图片切换的JavaScript代码，个人觉得，还是挺精炼的，希望对这个展示效果有兴趣的同仁能提供一些参考。提供demo实例页面，源代码可以在实例页面上右键单击查看，希望对您有所帮助。
下为demo页面的截图缩略图：
看图说话：
1、这里使用三张图片做演示，左栏为三张小图，右侧为三张大图，但是大图通过绝对定位受限于父标签的overflow:hidden属性只显示了一张图片。在实际页面上，左右内容是可以更改的，并不局限于图片这一格式。
2、动画效果有两类触发，一是定时器触发动画，也就是没间隔一段时间，图片就会切换显示一次；还有就是鼠标经过缩略图触发图片切换，鼠标事件会清除定时器，直至鼠标移开缩略小图。
3、左侧缩略图样式的差异建议通过class控制，通过class类的添加移除控制缩略图样式的显示。使用class控制样式的好处在控制单一方便，尤其当左侧缩略内容丰富时（例如本文提到的迅雷首页的那个切换效果）。
4、右侧大图由于图片大小有差异，所以我添加的空span标签控制图片垂直居中。在实际项目中，右侧的大图肯定是大小一模一样的，所以源代码中的span空标签可以删除，image大图的样式也可以去除。
5、关于JavaScript代码部分，值得一提的是，在使用定时器处理一些动画效果时，建议使用闭包，便于控制。JavaScript中的闭包是高级JavaScript必须掌握的知识，如果您不熟悉，建议看看。代码细节部分就不多说了，我对JavaScript涉猎尚浅，代码一定不是最优的，欢迎在JavaScript上颇有心得的同行们提出建议，不甚感谢。
您可以单击这里：demo实例页面
由于单页面，源代码可直接在demo实例页面右键查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="JavaScript实现图片切换显示幻灯片动画效果" />
<meta name="description" content="张鑫旭web前端学习之JavaScript" />
<meta name="keywords" content="张鑫旭,鑫空间-鑫生活,博客,web前端,css,demo页面,学习,JavaScript" />
<meta name="author" content="张鑫旭,zhangxixnu" />
<title>JavaScript实现图片切换显示幻灯片动画效果</title>
<link href="http://www.zhangxinxu.com/zxx_ico.png" target="_blank" rel="external nofollow" rel="shortcut icon"/>
<style type="text/css">
.zxx_img_left{width:156px; float:left; margin:0 0 30px 0; padding:10px 0; text-align:center; border:1px solid #34538b; list-style-type:none;}
.zxx_img_left li{padding-top:14px; padding-bottom:5px;}
.zxx_img_left li a img{padding:1px; border:2px solid white;}
.zxx_img_left li a.on img{border-color:#0CF;}
.zxx_img_right{width:522px; margin-left:10px; margin-bottom:30px; float:left; border:1px solid #34538b; height:392px; position:relative; overflow:hidden;}
.zxx_img_move{width:522px; padding:0; margin:0; position:absolute; left:5px; top:0px; list-style:none; font-size:0;}
.zxx_img_move li{height:390px; text-align:center;}
.zxx_img_move li img{vertical-align:middle;}
.zxx_img_move li span{display:inline-block; width:1px; height:100%; vertical-align:middle;}
.zxx_ad{float:left; margin-left:15px;}
.zxx_bottom{padding:40px 0; margin-top:20px; clear:both; text-align:center; font-size:12px;}
a{color:#34538b; text-decoration:underline;}
a:hover{color:#f30;}
</style>
<script type="text/javascript">
window.onload = function(){
var oMove = document.getElementById("imageMove");
//运动函数
var funMove = function(pos){
var move = function(){
var curPos = parseInt(oMove.style.top,10);
var speed = 60;
if(Math.abs(curPos-pos)>speed){
//判断移动方向
curPos-=((curPos-pos)/Math.abs(curPos-pos))*speed;
oMove.style.top = curPos+"px";
setTimeout(move,30);
}else{
oMove.style.top = pos + "px";
}
};
setTimeout(move,10);
};
var oClick = document.getElementById("imageLeft").getElementsByTagName("a");
for(var i=0; i<oClick.length; i+=1){
var flag = 0;
var timeout;
//鼠标经过播放动画
oClick[i].onmouseover = function(i){
return function(e){
clearTimeout(timeout);
oClick[flag].className = "";
this.className = "on";
funMove(-390*i);
flag = i;
}
}(i);
oClick[i].onmouseout = function(i){
return function(e){
timeout = setTimeout(step,4000);
}
}(i);
//定时器播放动画
if(i === 0){
var step = function(){
oClick[flag].className = "";
flag = flag>=oClick.length-1?0:flag+1;
oClick[flag].className = "on";
funMove(-390*flag);
timeout = setTimeout(step,4000);
};
setTimeout(step,4000);
}
}
};
</script>
</head>
<body>
<ul id="imageLeft" class="zxx_img_left">
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="on"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></a>
</li>
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="http://image.zhangxinxu.com/image/study/s/s128/mm10.jpg" /></a>
</li>
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="http://image.zhangxinxu.com/image/study/s/s128/mm15.jpg" /></a>
</li>
</ul>
<div class="zxx_img_right">
<ul id="imageMove" class="zxx_img_move" style="top:0px;">
<li>
<img src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" />
<span></span>
</li>
<li>
<img src="http://image.zhangxinxu.com/image/study/s/s512/mm10.jpg" />
<span></span>
</li>
<li>
<img src="http://image.zhangxinxu.com/image/study/s/s512/mm15.jpg" />
<span></span>
</li>
</ul>
</div>
<div class="zxx_ad">
<script type="text/javascript"><!--
google_ad_client = "pub-0090627341039040";
/* 300x250, 纯图片广告 */
google_ad_slot = "2939854193";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="zxx_bottom">
copyright © <a href="http://www.zhangxinxu.com" target="_blank" rel="external nofollow" >张鑫旭-鑫空间-鑫生活</a> | <a href="http://www.zhangxinxu.com/wordpress/?p=288" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >本篇相关文章</a>
</div>
</body>
</html>
原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=288