jQuery轮播图之上下轮播

如图实现功能：

1.鼠标放上图片图片停止滚动并显示对应数字

2.鼠标离开图片继续滚动并显示对应数字

3.鼠标放到对应的数字，显示到相对应图片并停止滚动

轮播图原理：

定义div里面存放ul，但每次只显示一个li,利用定时器setinteval定时和animate动画来移动li的位置。

animate

返回值:jQueryanimate(params,[speed],[easing],[fn])

概述：用于创建自定义动画的函数。

参数：

params,[speed],[easing],[fn]Options,Number/String,String,FunctionV1.0

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

setinteval定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

提示： 1000 毫秒= 1 秒。

htm代码：

<div class="ad">
                <ul class="slider">
                    <li><img src="images/ads/1.gif" /></li>
                    <li><img src="images/ads/2.gif" /></li>
                    <li><img src="images/ads/3.gif" /></li>
                    <li><img src="images/ads/4.gif" /></li>
                    <li><img src="images/ads/5.gif" /></li>
                </ul>
                <ul class="num">
                    <li class="on">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>

jquery代码

$(document).ready(function () {
    //大图片滚动
    var settime;//定义定时器
    var height = $(".slider li").height();//图片高度
    var index = 0;//图片索引
    var len = $(".slider li").length;
    //图片移动方法 
    function showimg(index) {
        $(".slider").animate({ top: -height * index }, 900)
        $(".num li").removeClass("on").eq(index).addClass("on");
    }
    //悬停事件
    $(".slider").hover(function () {
        clearInterval(settime);//鼠标滑入清楚定时器
    }, function () {
        settime = setInterval(function () {
            showimg(index);
            index++;
            if (index == len) {
                index = 0;
            }
        }, 1000)
    }).trigger("mouseleave")
    //鼠标放在小数字上
    $(".num li").mouseover(function () { //鼠标放在数字上的方法
        index = $(".num li").index(this); //值为选中的li的索引
        showimg(index);
        clearInterval(settime);
    })

})