29-解决方案
13.7.2 解决方案
使用jQuery的 .fadeIn() 和 .fadeOut() 方法，可以创建一个细致的交叉消隐动画，循环读取一个数组，根据设置好的定时器修改每幅图像的不透明度。通过实现从13.4节学来的代码，可以创建指向每张图片的链接，不仅使目标图像出现在前景上，而且将标志变量 pause 设置为 true 或者 false ，从而启动或者停止动画。这样就能实现真正可用的图片循环播放器，而不仅仅是纯粹的视觉效果。
1．图片循环播放器——HTML代码
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<title>jQuery Cookbook - Ch.13 - Cross-fading Rotating Images</title>
<link rel="stylesheet" type="text/css" href="../_common/basic.css" />
<link rel="stylesheet" type="text/css" href="rotator.css" />
<script type="text/javascript">
/* <![CDATA[ */
document.write('<link rel="stylesheet" type="text/css" href="preload.css" />');
/* ]]> */
</script>
<script type="text/javascript" src="../_common/jquery.js"></script>
<script type="text/javascript" src="rotator.js"></script>
</head>
<body>
<div id="container">
<div id="rotator_wrapper">
<ul id="rotator">
<li id="photo_1">
<img src="../_common/photo_1.jpg" alt="Photo" />
</li>
<li id="photo_2">
<img src="../_common/photo_2.jpg" alt="Photo" />
</li>
<li id="photo_3">
<img src="../_common/photo_3.jpg" alt="Photo" />
</li>
<li id="photo_4">
<img src="../_common/photo_4.jpg" alt="Photo" />
</li>
<li id="photo_5">
<img src="../_common/photo_5.jpg" alt="Photo" />
</li>
</ul>
<ul id="rotator_controls">
<li>
<a href="#photo_1" class="current">1</a>
</li>
<li>
<a href="#photo_2">2</a>
</li>
<li>
<a href="#photo_3">3</a>
</li>
<li>
<a href="#photo_4">4</a>
</li>
<li>
<a href="#photo_5">5</a>
</li>
</ul>
<a href="#" id="rotator_play_pause">PAUSE</a>
</div>
</div>
</body>
</html>
2．图片循环播放器——jQuery代码
// 初始化
function init_rotator() {
// 元素存在吗？
if (!$('#rotator').length) {
//如果不存在,退出
return;
}
// 旋转速度
var speed = 2000;
// 暂停设置
var pause = false;
// rotate函数
function rotate(element) {
// 如果用户交互则停止
if (pause) {
return;
}
// 下一个/第一个<li>
var $next_li = $(element).next('li').length ?
$(element).next('li') :
$('#rotator li:first');
//下一个/第一个控制链接
var $next_a = $('#rotator_controls a.current').parent('li').next('li').length ?
$('#rotator_controls a.current').parent('li').next('li').find('a') :
$('#rotator_controls a:first');
//动画
$('#rotator_controls a.current').removeClass('current');
$next_a.addClass('current');
// 继续
function doIt() {
rotate($next_li);
}
// 淡出<li>
$(element).fadeOut(speed);
// 显示下一个<li>
$($next_li).fadeIn(speed, function() {
// 稍作延迟
setTimeout(doIt, speed);
});
}
// 为控件添加单击监听器
$('#rotator_controls a').click(function() {
// 修改按钮文本
$('#rotator_play_pause').html('PLAY');
//显示目标图片,隐藏其他<li>
$($(this).attr('href')).show().siblings('li').hide();
// 添加class="current"并从其余元素中删除该类
$(this).addClass('current').parent('li').siblings('li')
.find('a').removeClass('current');;
//暂停动画
pause = true;
// 不要追踪链接
this.blur();
return false;
});
// 暂停/播放动画
$('#rotator_play_pause').click(function() {
// 按钮表示什么？
if ($(this).html() === 'PAUSE') {
// 停止循环
pause = true;
// 修改文本
$(this).html('PLAY');
} else {
// 删除class="pause"
pause = false;
// 开始循环
rotate('#rotator li:visible:first');
// 修改文本
$(this).html('PAUSE');
}
// 不要追踪链接
this.blur();
return false;
});
//隐藏除了第一个以外的所有<li>
$('#rotator li:first').siblings('li').hide();
//等待页面加载
$(window).load(function() {
// 开始循环
rotate($('#rotator li:visible:first'));
});
}
// 启动
$(document).ready(function() {
init_rotator();
});