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. 实现效果