快捷導(dǎo)航

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

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

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

效果圖.如下：

動(dòng)畫(huà)效果介紹：這組廣告效果是打開(kāi)頁(yè)面后圖片會(huì)自動(dòng)播放，從1-5共計(jì)5張圖片，如果屬標(biāo)放到右下角的1、2、3、4、5列表上，可以自由進(jìn)行切換到自己想看的圖片上去。圖片切換是由下到上變換的。

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

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

復(fù)制代碼代碼如下:

 
<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 代碼如下:

復(fù)制代碼代碼如下:

 
//超鏈接文字提示 
$(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(); //用來(lái)初如化，當(dāng)打開(kāi)頁(yè)面時(shí)，做第一個(gè)圖片為屬標(biāo)放上時(shí)去觸發(fā)動(dòng)畫(huà). 


//以<ad 圖片>為對(duì)象, 屬標(biāo)滑入停止動(dòng)畫(huà)，屬標(biāo)滑出開(kāi)始動(dòng)畫(huà) 
$(".ad").hover(function(){ 
clearInterval(adTimer); 
},function(){ 
adTimer = setInterval(function(){ 
showImg(index); 
index++; 
if( index == len ){ index=0; } 
} , 3000); 
}).trigger("mouseleave"); 
}) 

//通過(guò)給定的的索引 顯示不同的圖片 

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》對(duì)應(yīng)的CSS樣式：

復(fù)制代碼代碼如下:

 
.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; 
} 