JQuery_jqueryによる商品広告効果-jsチュートリアル-php.cn

JQuery_jqueryによる商品広告効果

WBOY

リリース： 2016-05-16 18:14:12

オリジナル

1178 人が閲覧しました

効果図は次のとおりです:
JQuery_jqueryによる商品広告効果
アニメーション効果の紹介: この一連の広告の効果は、ページを開いた後に写真が自動的に再生されることです (合計 5 枚の写真)。標準に属する場合は 1 ～ 5。右下の 1、2、3、4、5 のリストに移動すると、見たい写真に自由に切り替えることができます。画像の切り替えは下から上になります。
JQuery_jqueryによる商品広告効果
制作のアイデア: まず、これらの 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 構造は次のとおりです:

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

/li>

" >

gt;

;

/li>

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(); //ページを開いたときに、最初の画像がアニメーションをトリガーする属性として配置されます。 >
//<広告画像> ; を使用します。アニメーションを停止するには属性がスライドインし、アニメーションを開始するには属性がスライドアウトします。
$(".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; 
} 