快捷導(dǎo)航

基于Jquery實(shí)現(xiàn)的一個(gè)圖片滾動(dòng)切換

更新時(shí)間：2012年06月21日 15:54:56 作者：

很多效果還是要封裝成插件才好，這里只是給大家個(gè)效果參考。對(duì)像我這種新手應(yīng)該還是有幫助的吧

首先還是要引用jquery框架的。

然后開始HTML代碼：

 
<div id="New_zlMimgMv"> 
<div class="imgMvBox"> 
<ul id="imgMvCon"> 
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> 
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> 
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> 
</ul> 
</div> 
<div class="imgMvNum"> 
<a href="javascript:;">專業(yè)問答平臺(tái)</a> 
<a href="javascript:;" style="width:206px;">啊是發(fā)達(dá)庵圣坊但是分開就</a> 
<a href="javascript:;">同城阿薩德業(yè)動(dòng)</a> 
</div> 
</div> 

再然后看看CSS（大家也可以直接看JS的）：

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

 
ul,img,li,a{ 
border:0; 
margin:0; 
padding:0; 
list-style:none; 
} 
#New_zlMimgMv { 
border: 1px solid #B8B8B8; 
height: 192px; 
margin-bottom: 12px; 
width: 446px; 
} 
#New_zlMimgMv .imgMvBox, #New_zlMimgMv .imgMvBox img { 
height: 160px; 
width: 446px; 
} 
#New_zlMimgMv .imgMvBox { 
overflow: hidden; 
} 
#New_zlMimgMv .imgMvNum a { 
background: #E6E6E6; 
display: block; 
float: left; 
height: 32px; 
line-height: 32px; 
text-align: center; 
text-decoration: none; 
width: 120px; 
color:#282828; 
} 
#New_zlMimgMv .imgMvNum a.changeThis { 
background: #A29F9F; 
color: #FFFFFF; 
} 

最后是JQ代碼了：

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

 
　　var imgLength=$("#imgMvCon li").length;//獲取需滾動(dòng)元素總數(shù) 
var imgHeight=$("#imgMvCon li").height();//獲取需滾動(dòng)元素高度 
var totalHeight=imgLength*imgHeight;//獲取需滾動(dòng)元素總高度 
var mvul=$("#imgMvCon"); 
var positiontop=0;//定義一個(gè)初始偏移位置0var linknum=0;//定義一個(gè)用于控制按鈕切換索引的初始值 
var mvTimer;//設(shè)置一個(gè)定時(shí)器 
mvul.parent().css({"position":"relative"})//設(shè)置容器的CSS 
mvul.css({"position":"absolute"});//同上 
$(".imgMvNum a").eq(linknum).addClass("changeThis");//給第一個(gè)按鈕添加樣式 
function imgMv(){ 
if(imgLength>1)//如果不是一張圖片的話就執(zhí)行下面的 
{ 
positiontop=positiontop+imgHeight;//沒執(zhí)行一次便宜位置加一次高度 
if(positiontop==totalHeight)//如果偏移值等于總高度將偏移值設(shè)回0 
{ 
positiontop=0; 
} 
linknum++;//運(yùn)行一次，用于控制按鈕切換的索引加1 
if(linknum>=imgLength)//如果索引大于或等于滾動(dòng)元素總長度，將索引設(shè)回0 
{ 
linknum=0; 
} 
mvul.animate({top:-(linknum*imgHeight)},400);//用animate屬性實(shí)現(xiàn)滾動(dòng),'linknum*imgHeight'方便和按鈕同步 
$(".imgMvNum a").removeClass("changeThis");//移除樣式 
$(".imgMvNum a").eq(linknum).addClass("changeThis");//添加樣式 
} 
} 
function startMv(){ 
mvTimer=setInterval(imgMv,4000);//定時(shí)器函數(shù) 
} 
startMv();//運(yùn)行定時(shí)器 
$(".imgMvNum a").each(function(){//遍歷按鈕 
$(this).mouseover(function(){//鼠標(biāo)經(jīng)過按鈕 
clearInterval(mvTimer);//清除定時(shí)器 
linknum=$(this).index();//鼠標(biāo)經(jīng)過按鈕將linknum設(shè)置為當(dāng)前按鈕索引 
$(".imgMvNum a").removeClass("changeThis"); 
$(this).addClass("changeThis"); 
mvul.animate({top:-(linknum*imgHeight)},300);//用animate屬性實(shí)現(xiàn)滾動(dòng),'linknum*imgHeight'方便和按鈕同步 
}).mouseout(function(){ 
startMv();//鼠標(biāo)移出再次執(zhí)行定時(shí)器 
}); 
}); 