【web前端】JavaScript实现图片幻灯片滚动播放动画效果

最新推荐文章于 2024-09-06 19:40:02 发布

Android_Wong

最新推荐文章于 2024-09-06 19:40:02 发布

阅读量7k

点赞数 2

分类专栏： JavaScript 播放动画效果滚动实现图片幻灯片文章标签： javascript web function class google border

JavaScript 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

播放动画效果

1 篇文章 0 订阅

订阅专栏

滚动

1 篇文章 0 订阅

订阅专栏

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页面的截图缩略图：

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" 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="#" class="on"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></a>
    </li>
    <li>
    	<a href="#"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm10.jpg" /></a>
    </li>
    <li>
    	<a href="#"><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">张鑫旭-鑫空间-鑫生活</a> | <a href="http://www.zhangxinxu.com/wordpress/?p=288">本篇相关文章</a>
</div>
</body>
</html>

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=288