基于JQuery制作的產(chǎn)品廣告效果

更新時間：2010年12月08日 15:04:38 作者：

這個漂亮的產(chǎn)品廣告效果，在購物網(wǎng)站也是比較常見的，或是迅雷視頻網(wǎng)站上。

效果圖.如下：

動畫效果介紹：這組廣告效果是打開頁面后圖片會自動播放，從1-5共計5張圖片，如果屬標放到右下角的1、2、3、4、5列表上，可以自由進行切換到自己想看的圖片上去。圖片切換是由下到上變換的。

制作思路：先將這5張圖片分別放入到ul的5個li列表中,
《1》求出圖片個的總個數(shù). 并當我們?nèi)绻趩螕?.2.3.4.5時就將它對應的數(shù)字傳過去，就它顯示對應的圖片。
《2》如果屬標放上，就停止動畫（可以利用clearIntval() ），如果屬標移到，我們可以利用 setIntval(函數(shù)，時間) 去每隔3000毫秒去執(zhí)行一下這個函數(shù)一次。
《3》完成這個動畫函數(shù)。在這個函數(shù)中首先我們可以得到這個動畫區(qū)域（.slider）的高度。再利用animate自定義動畫函數(shù)實現(xiàn)在TOP位置上變化。并且給當前l(fā)i中的數(shù)字加上高亮效果。
《4》還有一點就是要使這里的TOP變化正常，一定要在當前區(qū)域的父標記(.ad)中設置"position:relative;" 一切就都已OK了。制作代碼如下：

1》html結(jié)構(gòu)如下：

復制代碼代碼如下:

 
<div class="ad" > 
<ul class="slider" > 
<li><img src="images/ads/1.gif"/></li> 
<li><img src="images/ads/2.gif"/></li> 
<li><img src="images/ads/3.gif"/></li> 
<li><img src="images/ads/4.gif"/></li> 
<li><img src="images/ads/5.gif"/></li> 
</ul> 
<ul class="num" > 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</div> 

2》jquery 代碼如下:

復制代碼代碼如下:

 
//超鏈接文字提示 
$(function(){ 
var len = $(".num >li").length; 
var index = 0; 
var adTimer; 

$(".num li").mouseover(function(){ 
index = $(".num li").index(this); //這里的 " this " 可以換成 " $(this) " 
showImg(index); 
}).eq(0).mouseover(); //用來初如化，當打開頁面時，做第一個圖片為屬標放上時去觸發(fā)動畫. 


//以<ad 圖片>為對象, 屬標滑入停止動畫，屬標滑出開始動畫 
$(".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; 
} 