Specific implementation of jQuery image carousel_jquery

效果如下：

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

复制代码 代码如下:

   

       
• 

       
• 

       
• 

       
• 

       
• 

   

   

       
• 1

       
• 2

       
• 3

       
• 4

       
• 5

   

复制代码 代码如下:

#scrollPics{
    height: 150px;
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    position:relative;
}
.num{
    position:absolute;
    right:5px;
    bottom:5px;
}
#scrollPics .num li{
    float: left;
    color: #FF7300;
    text-align: center;
    line-height: 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    overflow: hidden;
    margin: 3px 1px;
    border: 1px solid #FF7300;
    background-color: #fff;
}
#scrollPics .num li.on{
    color: #fff;
    line-height: 21px;
    width: 21px;
    height: 21px;
    font-size: 16px;
    margin: 0 1px;
    border: 0;
    background-color: #FF7300;
    font-weight: bold;
}

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

接下来是 js 代码：

复制代码 代码如下:

//Scrolling advertisement
var len = $(".num > li").length;
var index = 0; //Picture serial number
var adTimer;
$(".num li").mouseover(function() {
index = $(".num li").index(this); //Get the index of mouseover li
showImg(index);
}).eq(0).mouseover();
//Slide in to stop animation, slide out to start animation.
$('#scrollPics').hover(function() {
clearInterval(adTimer);
}, function() {
adTimer = setInterval(function() {
showImg(index)
index ;
if (index == len) // After the last picture, go to the first one
                                                                                                                                                                              index = 0;
function showImg(index) {
var adHeight = $("#scrollPics>ul>li:first").height();
$(".slider").stop(true, false) .animate({ "marginTop": -adHeight * index "px" //Change the value of the marginTop attribute to achieve the effect of carousel

}, 1000);
$(".num li"). removeClass("on")
.eq(index).addClass("on");
}