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

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);
    })

})