jQuery实现简单的图片轮播（二）-增加左右（或上下）翻页功能

1. 需求

上一篇文章《jQuery实现简单的图片轮播》实现的效果中，图片只能从右边出现，不能从左右都出现，所以本文将实现图片从左右（或上下）都可以出现的功能。

为避免与上一篇文章过多重复，本文中实现了图片上下翻页出现的功能。

2. 思路：

首先通过jQuery的选择器找到之前选中的li元素在li元素集合中的索引位置，然后同样通过jQuery的选择器找到当前选中的li元素在li元素集合中的索引位置，最后对两者进行比较。

如果当前索引位置 = 之前索引位置，则什么都不做；

如果当前索引位置 > 之前索引位置，则向上翻页；

如果当前索引位置 < 之前索引位置，则向下翻页。

3. 实现代码

3.1 文件结构

3.2 html代码

<span style="white-space:pre">	</span><h1 style="text-align:center;">轮播图Demo</h1>
<div class="box">
<ul class="pic-box">
<li><img width="550px" height="230px" src="images/marriage1.jpg"></li>
<li><img width="550px" height="230px" src="images/marriage2.jpg"></li>
<li><img width="550px" height="230px" src="images/marriage3.jpg"></li>
<li><img width="550px" height="230px" src="images/marriage4.jpg"></li>
<li><img width="550px" height="230px" src="images/marriage5.jpg"></li>
<li><img width="550px" height="230px" src="images/marriage6.jpg"></li>
<li><img width="550px" height="230px" src="images/marriage7.jpg"></li>
</ul>
<ul class="num-box">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</div>

3.3 css代码

<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;font-family:Helvetica,sans-serif;}
ul li{list-style:none;}
a{text-decoration:none;}
.box{position:relative;width:550px;height:230px;border:3px solid #F90;padding:10px;margin:0 auto;z-index:1;}
.pic-box{position:relative;width:550px;height:230px;z-index:2;overflow:hidden;}
.pic-box li{position:absolute;left:0;top:0;}
.num-box{position:absolute;width:200px;height:30px;right:10px;bottom:10px;z-index:9999;}
.num-box li{float:left;margin-right:8px;background:#666;}
.num-box li a{display:block;width:20px;height:20px;line-height:20px;text-align:center;color:#FFF;}
.num-box li.active{background:#f90;}
</style>

3.4 js代码

注意不要忘记导入jquery.js。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var num = 2;
$(".num-box").children("li").mouseover(function(){
// 获取之前选中li元素在所有li元素中的索引位置
var previousIndex = $(".num-box").children("li").index($(".active"));

// 设置选中css样式
$(this).addClass("active");
$(this).siblings().removeClass("active");

// 获取当前选中li元素在所有li元素中的索引位置
var currentIndex = $(".num-box").children("li").index($(this));

/**
* 如果当前索引位置 = 之前索引位置，则什么都不做。
* 如果当前索引位置 > 之前索引位置，则向上翻页。
* 如果当前索引位置 < 之前索引位置，则向下翻页。
*/
if(currentIndex == previousIndex){
return false;
} else if(currentIndex > previousIndex){
$(".pic-box").children("li").eq(currentIndex).css("top",230);
$(".pic-box").children("li").eq(currentIndex).css("z-index",num++);
$(".pic-box").children("li").eq(currentIndex).stop().animate({"top":"0"},250);
} else {
$(".pic-box").children("li").eq(currentIndex).css("top",-230);
$(".pic-box").children("li").eq(currentIndex).css("z-index",num++);
$(".pic-box").children("li").eq(currentIndex).stop().animate({"top":"0"},250);
}
});
})
</script>

4. 实现效果