jQuery图片轮播的具体实现_jquery

效果如下：

先看html代码，以及对应的css代码：

复制代码代码如下：

   

       
• 

       
• 

       
• 

       
• 

       
• ;

   

   

       
• 1

       
       
li>2
       
• 3

       
• 4

       
• 5

   

> ;

复制代码

代码如下：


#scrollPics{
    高度：150px；
    宽度：100%；
    边距底部：10px；
    溢出：隐藏；
    位置：相对；
}
.num{
    位置:绝对;
    右:5px;
    底部：5px;
}
#scrollPics .num li{
    浮动：左；
    颜色：#FF7300；
    文本对齐：居中；
    行高: 16px;
    宽度: 16px;
    高度: 16px;
    光标: 指针;
    溢出: 隐藏;
    边距: 3px 1px;
    边框: 1px 实线 #FF7300;
    背景颜色：#fff;
}
#scrollPics .num li.on{
    颜色：#fff;
    行高：21px;
    宽度：21px;
    高度：21 像素；
    字体大小：16 像素；
    边距：0 1 像素；
    边框：0；
    背景颜色：#FF7300；
    字体粗细：粗体；

}

用绝对定位设置列表 num 个的位置，对 li 设置相关样式，上表示显示图片的数字列表中 li 的样式类别。

接下来是js代码：

复制代码

代码如下：

//滚动广告
    var len = $(".num > li").length;
    var index = 0;  //图片序号
    var adTimer;
    $(".num li").mouseover(function() {
        index = $(".num li").index(this);  //获取鼠标悬浮 li 的index
        showImg(index);
    }).eq(0).mouseover();
    //滑入停止动画，滑出开始动画.
    $('#scrollPics').hover(function() {
        clearInterval(adTimer);
    }, function() {
        adTimer = setInterval(function() {
            showImg(index)
            index ;
            if (index == len) {       //最后一张图片之后，转到第一张
                index = 0;
            }
        }, 3000);
    }).trigger("mouseleave");

    function showImg(index) {
        var adHeight = $("#scrollPics>ul>li:first").height();
        $(".slider").stop(true, false).animate({
            "marginTop": -adHeight * index "px"    //改变 marginTop 属性的值达到轮播的效果
        }, 1000);
        $(".num li").removeClass("on")
            .eq(index).addClass("on");
    }