[理论知识]
我们在实际开发应用程序的过程中，经常会遇到图片轮播的效果需求，本文小博老师就为大家演示一下，如何使用JQuery框架实现图片轮播的效果。
[步骤解读一]界面布局
首先我们创建一个HTML页面，核心代码如下：
<body>
<div align="center" id="div_document">
<div align="center" id="div_document_content">
<!-- 图片轮播整体布局 -->
<div align="center" id="div_imgPlayer">
<!-- 轮播图片显示部分 -->
<div align="center" id="div_imgPlayer_img">
<!-- 前景显示图片 -->
<img src="images/teamsh2.jpg" width="100%" id="img_foreground" />
<!-- /前景显示图片 -->
<!-- 背景预加载图片 -->
<img src="images/teamsz2.jpg" width="100%" id="img_background" />
<!-- /背景预加载图片 -->
</div>
<!-- /轮播图片显示部分 -->
<!-- 轮播控件部分 -->
<table id="table_imgPlayer_controller" width="100%" border="0px" cellpadding="2px" cellspacing="2px">
<tr>
<th class="th_imgPlayer_controller">上海漕河泾</th>
<th class="th_imgPlayer_controller">深圳华强北</th>
<th class="th_imgPlayer_controller">南京新街口</th>
<th class="th_imgPlayer_controller">成都航空路</th>
<th class="th_imgPlayer_controller">北京回龙观</th>
<th class="th_imgPlayer_controller">博为峰教研</th>
</tr>
</table>
<!-- /轮播控件部分 -->
</div>
<!-- /图片轮播整体布局 -->
</div>
</div>
</body>
为了美化页面布局，我们添加css样式，核心代码如下：
<style>
body,div,img{margin:0px; border:0px; padding:0px;}
#div_document{width:100%;}
#div_document_content{width:1366px; position:relative;}
#div_imgPlayer{width:1036px; border:1px solid #ddd; padding:5px; margin-top:5px; position:relative;}
#div_imgPlayer_img{width:1024px; position:relative;}
#img_foreground{position:relative; z-index:2;}
#img_background{position:absolute;left:0px; top:0px; z-index:1;}
.th_imgPlayer_controller{ height:30px; border:1px solid #ddd; background-color:#265b99; color:#f6853a; cursor:pointer;}
</style>
使用浏览器访问，看到页面布局效果如下：
[步骤解读二]增加手动轮播效果
接下来小博老师为大家演示，增加手动轮播的效果，当我们点击轮播控件时，图片会按照被点击的控件显示相应图片，核心代码如下：
<script src="script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
// 定义数组，存放所有轮播图片
var imgs = new Array("images/teamsh2.jpg","images/teamsz2.jpg","images/teamnj2.jpg","images/teamcd2.jpg","images/teambj2.jpg","images/team2.jpg");
// 定义索引，存放当前显示图片的索引
var index = 0;
// 让第一个轮播控件样式变化
$(".th_imgPlayer_controller").first().css({"color":"#265b99","background-color":"#f6853a"});
// 添加轮播控件的点击事件
$(".th_imgPlayer_controller").click(function(){
// 先将所有的轮播控件样式恢复成默认样式
$(".th_imgPlayer_controller").css({"color":"#f6853a","background-color":"#265b99"});
// 改变当前被点击的轮播控件的样式
$(this).css({"color":"#265b99","background-color":"#f6853a"});
// 停止正在播放的动画
$("#img_foreground").stop(true,true);
// 获取当前被点击的轮播控件的索引
index = $(".th_imgPlayer_controller").index( $(this) );
// 改变背景预加载图片的src
$("#img_background").attr("src",imgs[index]);
// 前景显示图片逐渐消失，用户看见背景预加载图片
$("#img_foreground").fadeOut(1000,function(){
// 改变前景显示图片的src
$(this).attr("src",imgs[index]);
// 将前景显示图片重新显示出来
$(this).fadeIn();
});
});
});
</script>通过浏览器访问，现在我们点击轮播控件后，就会显示相应的图片了：
[步骤解读三]增加自动轮播效果
接下来小博老师为大家演示下，添加自动轮播的效果，用户不点击轮播控件时，图片会依次按顺序切换，增加javascript核心代码如下：
// 定义图片自动轮播的函数
function auto(){
// 改变当前要显示的轮播图片的索引
index = ++index >= imgs.length?0:index;
// 先将所有的轮播控件样式恢复成默认样式
$(".th_imgPlayer_controller").css({"color":"#f6853a","background-color":"#265b99"});
// 改变当前要显示的轮播图片对应的轮播控件的样式
$(".th_imgPlayer_controller").eq(index).css({"color":"#265b99","background-color":"#f6853a"});
// 停止正在播放的动画
$("#img_foreground").stop(true,true);
// 改变背景预加载图片的src
$("#img_background").attr("src",imgs[index]);
// 前景显示图片逐渐消失，用户看见背景预加载图片
$("#img_foreground").fadeOut(1000,function(){
// 改变前景显示图片的src
$(this).attr("src",imgs[index]);
// 将前景显示图片重新显示出来
$(this).fadeIn();
});
}
// 定义计时器
var timer = window.setInterval(auto,5000);
// 鼠标进入轮播界面时，暂停自动轮播；鼠标离开轮播界面时，恢复自动轮播
$("#div_imgPlayer").hover(function(){
window.clearInterval(timer);
},function(){
timer = window.setInterval(auto,5000);
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
