jQuery 이미지 carousel_jquery의 특정 구현

效果如下：

先看一看html代码, 以及对应的css代码:

复主代码 代码如下:

   

       
• 

       
• 

       
• 

       
• 

       
• 
     

   

       
• 1

        < li>2
       
• 3

       
• 4

       
• 5

   

;

复代码 代码如下:

#scrollPics{
    높이: 150px;
    너비: 100%;
    여백-하단: 10px;
    오버플로: 숨김;
    위치: 상대;
}
.num{
    위치:절대;
    오른쪽:5px;
    하단:5px;
}
#scrollPics .num li{
    float: 왼쪽;
    color: #FF7300;
    text-align: center;
    line-height : 16px;
    너비: 16px;
    높이: 16px;
    커서: 포인터;
    오버플로: 숨김;
    여백: 3px 1px;
    테두리: 1px 단색 #FF7300;
    배경색: #fff;
}
#scrollPics .num li.on{
    색상: #fff;
    줄 높이: 21px;
    너비: 21px;
    높이: 21px;
    글꼴 크기: 16px;
    여백: 0 1px;
    테두리: 0;
    배경색: #FF7300;
    글꼴 두께: 굵게;
}

사용중인 绝对定位设置列表 num 的位置,对 li 设置栳样式，on 表示显示图 Pictures 对应的数字列表中 li 的样式类别。

接下来是 js 代码：

复主代码 代码如下:

//스크롤링 광고
var len = $(".num > li").length;
var index = 0; //사진 일련번호
var adTimer;
$(".num li").mouseover(function() {
index = $(".num li").index(this); //마우스 오버 li의 인덱스 가져오기
showImg(index) ;
}).eq(0).mouseover();
//애니메이션을 중지하려면 안으로 밀고, 애니메이션을 시작하려면 밖으로 밀어냅니다.
$('#scrollPics').hover(function() {
clearInterval(adTimer);
}, function() {
adTimer = setInterval(function() {
showImg(index)
index ;
if (index == len) // 마지막 사진 이후 첫 번째 사진으로 이동
                                                                                                                                                         색인 = 0;
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");
}