jQuery イメージ carousel_jquery の具体的な実装

效果如下：

先見一視html代コード、およびそれに関連するcss代コード：

复制代代码如下:

• 


• 


• 


• 


• 
  

• 1

< li>2

• 3


• 4


• 5

复制代码代码如下:

#scrollPics{
高さ: 150px;
幅: 100%;
margin-bottom: 10px;
オーバーフロー: 非表示;
位置:相対;
}
.num{
position:absolute;
right:5px;
bottom:5px;
}
#scrollPics .num li{
float: left;
color: #FF7300;
text-align: center;
line-height : 16px;
幅: 16px;
高さ: 16px;
カーソル: ポインター;
オーバーフロー: 非表示;
マージン: 3px 1px;
境界線: 1px 実線 #FF7300;
背景色: #fff;
}
#scrollPics .num li.on{
カラー: #fff;
行の高さ: 21px;
幅: 21px;
高さ: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
背景色: #FF7300;
font-weight: 太字;
}

は、表示される写真に対応する数字列表内の li の型の種類を指定するために、配列番号 num の位置を設定します。

次は js 代コード：

复制代码代码如下:

//スクロール広告
var len = $(".num > li").length;
varindex = 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)
インデックス ;
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");
}