图片组淡入淡出效果

/// <reference path="jquery-1.8.3-vsdoc.js" />
$(document).ready(function () {
// var lis = $("#images_box_ul").children("li");

// var numbers = $(".img_box_number").children("li");
// var image_counts = lis.length;
// var i = 0;
// var play;
// autoPlay();
// function autoPlay() {
// play = setInterval(function () {
// if (i == 0) { i = 1 }; //不加这个判断,第1次呈现的时候将等待2次才会更换图片.因为默认显示的是第一张,所以赋值i为1,从第2张开始循环.仅限第1次的时候
// if (i == image_counts) { i = 0 }; //如果这个值等于图片总数的时候.将其赋值为0,重新开始循环
// $(".in_imgbox_li").removeClass("in_imgbox_li"); //找到当前显示图片的class,并且移除
// lis.eq(i).addClass("in_imgbox_li"); //第一次从eq值为0开始,也就是第1个.为其添加样式,也就是显示
// $(".in_imgbox_number").removeClass("in_imgbox_number"); //找到当前显示数字的class,移除
// numbers.eq(i).addClass("in_imgbox_number"); //添加第i个数字上的样式.
// i++; //自增1
// }, 3000); //延时3秒执行一次
// }

var lis = $("#images_box_ul").children("li");
var numbers = $(".img_box_number").children("li");
var visible_li = $("#images_box_ul li:visible");
var image_counts = lis.length;
var i = 0;
var play;
autoPlay();
function autoPlay() {
play = setInterval(function () {
if (i == 0) { i = 1 }; //不加这个判断,第1次呈现的时候将等待2次才会更换图片.因为默认显示的是第一张,所以赋值i为1,从第2张开始循环.仅限第1次的时候
if (i == image_counts) { i = 0 }; //如果这个值等于图片总数的时候.将其赋值为0,重新开始循环
visible_li.animate({ opacity: "0" }, 20); //200毫秒内将当前显示的图片的opacity属性改为0,大括号内是键值对的关系
lis.eq(i).animate({ opacity: "1" }, 200); //200毫秒内将当前序号的opacity属性改为1
$(".in_imgbox_number").removeClass("in_imgbox_number"); //找到当前显示数字的class,移除
numbers.eq(i).addClass("in_imgbox_number"); //添加第i个数字上的样式.
i++; //自增1
}, 3000); //延时3秒执行一次
}
lis.mouseover(function () {
clearInterval(play);
}).mouseout(function () {
autoPlay();
});
numbers.click(function () {//点击数字的时候
clickNo = $(this).index(); //获取当前点击的元素的序号
$(".in_imgbox_li").removeClass("in_imgbox_li"); //找到当前显示图片的class,并且移除
lis.eq(clickNo).addClass("in_imgbox_li"); //第一次从eq值为0开始,也就是第1个.为其添加样式,也就是显示
$(".in_imgbox_number").removeClass("in_imgbox_number"); //找到当前显示数字的class,移除
numbers.eq(clickNo).addClass("in_imgbox_number"); //添加第i个数字上的样式.
});
});