JQuery_jqueryによる商品広告効果

効果図は次のとおりです:

アニメーション効果の紹介: この一連の広告の効果は、ページを開いた後に写真が自動的に再生されることです (合計 5 枚の写真)。標準に属する場合は 1 ～ 5。右下の 1、2、3、4、5 のリストに移動すると、見たい写真に自由に切り替えることができます。画像の切り替えは下から上になります。

制作のアイデア: まず、これらの 5 つの写真を ul の 5 つの li リストに入れ、
《1》の写真の合計数を見つけます。そして、1.2.3.4 をクリックすると。 5の場合、対応する番号が渡され、対応する画像が表示されます。
《2》属性マークを配置したら、アニメーションを停止します(clearIntval()を使用できます)。属性マークを移動した場合は、setIntval(function, time)を使用して、この関数を3000ミリ秒ごとに実行できます。
《3》このアニメーション機能を完了します。この関数では、まずこのアニメーション領域 (.slider) の高さを取得します。次に、animate カスタム アニメーション関数を使用して、TOP 位置の変更を実現します。そして、現在の li の数字に強調表示効果を追加します。
《4》もう一つ、ここのTOP変更は通常通り、カレントエリアの親タグ(.ad)に必ず「position:relative;」を設定すればOKです。本番コードは次のとおりです:

1》HTML 構造は次のとおりです:

コードをコピーしますコードは次のとおりです。

<div class="ad" >
<ul class="slider" > image/ads/1.gif"/&gt ;</li>
<li><img src="images/ads/2.gif"/></li>
< li>

/li>
<li>
</ul> " >

1

2

3

gt;

4

;
<li>/li>
</ul>


2》jQuery コードは次のとおりです。

コードをコピー コードは次のとおりです: //ハイパーリンク テキスト プロンプト

$(function(){

var len = $(".num >li").length;
varindex = 0;
var adTimer;

$(" .nu​​m li").mouseover(function(){
Index = $(".num li").index(this); // ここの「this」は「 $(this) 」に置き換えることができます
showImg(index);
}).eq(0) .mouseover(); //ページを開いたときに、最初の画像がアニメーションをトリガーする属性として配置されます。 >
//<広告画像&gt ; を使用します。アニメーションを停止するには属性がスライドインし、アニメーションを開始するには属性がスライドアウトします。
$(".ad").hover(function() {
clearInterval(adTimer);
},function() {
adTimer = setInterval(function(){
showImg(index);
index ;
if(index == len ){ Index=0; }
} , 3000);
}).trigger("mouseleave");
})

// 指定されたインデックスを介して別の画像を表示します🎜>
function showImg(index){
var adHeight = $(".content_right .ad").height();
$(".slider").stop(true,false).animate ( {"top": -adHeight*index},1000 ) ;
$(".num li").removeClass("on")
.eq(index).addClass("on"); 🎜>}



3》対応する CSS スタイル:

コードをコピー


コードは次のとおりです:

.content_right{
background:#eee;
border : 1px solid #AAAAAA;
width: 586px;
float:left;
}


.content_right .ad {
margin-bottom:10px;
width:586px;
height:150px;
overflow:hidden;
position:relative;
}

.content_right .slider,
.content_right .num {
position:absolute;
}

.content_right .slider li{
list-style:none;
display:inline;
}

.content_right .slider img{
width:586px;
height:150px;
display:block;
}
.content_right .num{
right:5px;
bottom:5px;
}
.content_right .num li{
float: left;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-family: Arial;
font-size: 12px;
color: #FF7300;
background-color: #fff;
border: 1px solid #FF7300;
overflow: hidden;
margin: 3px 1px;
cursor: pointer;
}
.content_right .num li.on{
width: 21px;
height: 21px;
line-height: 21px;
color: #fff;
background-color: #FF7300;
font-size: 16px;
margin: 0 1px;
border: 0;
font-weight: bold;
}