欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery動(dòng)畫效果圖片輪播特效

 更新時(shí)間：2016年01月12日 16:34:12   作者：秋恨雪  
這篇文章主要介紹了jQuery動(dòng)畫效果圖片輪播特效，圖片可以進(jìn)行左右輪播，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

從這一章節(jié)開始，我將會(huì)為大家陸續(xù)的介紹利用Jquery完成特效動(dòng)畫。先來看看這一節(jié)所介紹的特效：傳統(tǒng)輪播。

一、需求分析

1. 提供很多尺寸相等的圖片，一排緊挨著顯示。

2. 左右有兩個(gè)切換按鈕，用來控制顯示上一張還是下一張。

3. 右下方有指示器"小圈圈"，用來提示顯示到第幾個(gè)圖片；也可以點(diǎn)擊它，進(jìn)行圖片的切換。

4. 每隔一個(gè)固定的時(shí)間，圖片會(huì)自動(dòng)滾動(dòng)。

5. 當(dāng)鼠標(biāo)放到圖片上面的時(shí)候，會(huì)停止自動(dòng)滾動(dòng)；當(dāng)鼠標(biāo)離開后，再經(jīng)過固定間隔時(shí)間后，又會(huì)自動(dòng)播放。

二、代碼剖析

1. 用html代碼搭建框架

<body> 
 <div id="container"> 
  <ul id="content"> 
   <li><a href="#"><img src="images/0.jpg"/></a></li> 
   <li><a href="#"><img src="images/1.jpg"/></a></li> 
   <li><a href="#"><img src="images/2.jpg"/></a></li> 
   <li><a href="#"><img src="images/3.jpg"/></a></li> 
   <li><a href="#"><img src="images/4.jpg"/></a></li> 
  </ul> 
  <div id="btn"> 
   <div id="leftBtn"></div> 
   <div id="rightBtn"></div> 
  </div> 
  <ul id="indicator"> 
   <li class="current"></li> 
   <li></li> 
   <li></li> 
   <li></li> 
   <li></li> 
  </ul> 
 </div> 
</body>

1> id為container的div，是整個(gè)輪播效果的容器。
2> id為content的ul，里面存放的內(nèi)容就是界面上面顯示的滾動(dòng)的圖片。

3> id為btn的div，里面的兩個(gè)子元素就是用來切換上一張還是下一張的按鈕。

4> id為indicator的ul，用來顯示指示器。

2. CSS代碼改變顯示樣式

1> 下面兩句代碼，清除掉瀏覽器默認(rèn)的間隙。

*{margin: 0; padding: 0;}

2> 設(shè)置父容器的樣式。

#container 
{ 
 width:560px; 
 height: 300px; 
 margin: 100px auto; 
 position: relative; 
 overflow: hidden; 
}

由于顯示的圖片大小就是 560 X 300, 所以這里的父容器的大小也設(shè)置這么大，這里設(shè)置的margin，就是讓父容器水平居中，垂直距離頂部100px，overflow表示如果顯示的子元素超出了container的范圍，就隱藏掉(注：由于顯示的圖片是一排顯示的，如果不加上overflow: hidden這個(gè)屬性的話，就露餡了，去掉這個(gè)屬性的話，效果如下：)。

也就是說，如果不加上overflow: hidden 這個(gè)屬性的話，所有的圖片就會(huì)一排全部顯示出來了。

最后一個(gè)就是定位屬性 position: relative; 由于container是父容器，所以應(yīng)該設(shè)置為relative，而它的所有的子元素要進(jìn)行絕對(duì)定位的話，他們的position應(yīng)該設(shè)置為absolute。這就是所謂的 "子絕父相" 原則。在絕對(duì)定位中都這么使用。

3> 設(shè)置content的樣式

#container #content 
{ 
 list-style: none; 
 width: 10000px; 
 position: absolute; 
 left:0; 
 top:0; 
} 
 
#container #content li 
{ 
 float:left; 
} 
 
#container #content li img 
{ 
 border: 0; 
}

注意到，content的width屬性設(shè)置為了10000px，這是為了保證它能夠存放足夠多的圖片。默認(rèn)情況下，content中所有的li是塊級(jí)元素，也就是他們會(huì)上下排列；所以加了一句float:left；讓他們左右排列。而父級(jí)元素container設(shè)置了overflow: hidden, 所以這些左右排列的圖片只能看到第一個(gè)。
4> 設(shè)置左右切換按鈕的樣式

#container #leftBtn 
{ 
 position: absolute; 
 width:45px; 
 height: 45px; 
 top:108px; 
 left: 20px; 
 background: url(images/icons.png) no-repeat 0 0; 
 cursor: pointer; 
} 
 
#container #rightBtn 
{ 
 position: absolute; 
 width:45px; 
 height: 45px; 
 top:108px; 
 right: 20px; 
 background: url(images/icons.png) no-repeat 0 -45px; 
 cursor: pointer; 
}

注意到，在獲取左右按鈕的時(shí)候，他們是取自同一張圖片icons.png。只是圖片截取的位置不一致，這就是所謂的"精靈"。就是為了減小圖片占用大小，而把很多的小icon放置在一張圖片上面，然后通過定位截取的辦法，獲取想要的部分。（注：關(guān)于怎樣定位icon？ 1. 寫代碼慢慢調(diào)節(jié)；2. 用精靈裁切定位軟件，如：CSS Sprites等）。圖片設(shè)計(jì)大致如下：

這張圖片中，不僅包含了左右切換按鈕，指示器的按鈕也一并給出了，所以在書寫指示器按鈕的css代碼時(shí)候，同樣也可以使用這張圖片。

4> 設(shè)置指示器的樣式

#container #indicator 
{ 
 position: absolute; 
 right: 50px; 
 list-style: none; 
 bottom: 12px; 
} 
 
#container #indicator li 
{ 
 float: left; 
 cursor: pointer; 
 margin-left: 20px; 
 width:14px; 
 height: 14px; 
 background: url(images/icons.png) no-repeat -23px -127px; 
} 
 
#container #indicator li.current 
{ 
 background-position: -9px -125px; 
}

代碼中 #indicator li 設(shè)置的background的圖片就是上圖中空心的小圓圈，而 #indicator li.current 設(shè)置的background的圖片就是上圖中實(shí)心的大圓圈。所以剛開始的時(shí)候，默認(rèn)選中第一個(gè)。
3. 用JQuery添加交互效果

1> 切換下一張(點(diǎn)擊右邊按鈕)

$(function(){ 
 
 // 總的圖片個(gè)數(shù)(用代碼獲取個(gè)數(shù)，擴(kuò)展性比較強(qiáng)) 
 var totalCount = $("#container #content li").length; 
 // 當(dāng)前處于第幾個(gè)圖片 
 var nowImage = 0; 
 $("#container #btn #rightBtn").click(rightBtnClick); 
<span style="white-space:pre"> </span>function rightBtnClick(){ 
  if(!$("#container #content").is(":animated")){ 
   if(nowImage == totalCount - 1){ 
   <span style="white-space:pre"> </span>nowImage = 0; 
<span style="white-space:pre">    </span>$("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
<span style="white-space:pre">    </span>$("#container #content").animate({"left": -560 * (totalCount -1 )}, 1000, function(){ 
    $("#container #content").css("left",0); 
   }); 
  } else { 
   nowImage++; 
   changeImage(); 
  } 
 } 
} 
});

changeImage 函數(shù)

function changeImage(){ 
 if(!$("#container #content").is(":animated")){ 
 <span style="white-space:pre"> </span>$("#container #content").animate({"left": -560 * nowImage}, 1000); 
  $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
 } 
}

代碼中，當(dāng)DOM元素加載完畢，就執(zhí)行了$('#container #btn #rightBtn').click(rightClick), 也就是立刻執(zhí)行了切換圖片操作。在rightBtnClick函數(shù)中，先進(jìn)行了content是否正在進(jìn)行動(dòng)畫的判斷，這樣做的目的：防止動(dòng)畫在執(zhí)行的過程，用戶又進(jìn)行強(qiáng)制的執(zhí)行其他動(dòng)畫，會(huì)產(chǎn)生干擾，最終導(dǎo)致動(dòng)畫效果混亂。

如果有的話，則將標(biāo)志變量nowImage指向下一個(gè)圖片，并且執(zhí)行changeImage函數(shù)中的代碼：1. 將content中的所有圖片左移一個(gè)圖片大小的寬度；2.將指示器的圖片也移動(dòng)到對(duì)應(yīng)的位置。

如果沒有的話，并且圖片現(xiàn)在是顯示到了最后一個(gè)，則先執(zhí)行動(dòng)畫，執(zhí)行完畢后，立刻將content中所有的圖片內(nèi)容拉回到第一個(gè)，但是這里任然會(huì)穿幫，因?yàn)楫?dāng)前圖片顯示為最后一個(gè)后，你繼續(xù)執(zhí)行動(dòng)畫，是沒有任何效果的，所以在這個(gè)動(dòng)畫執(zhí)行期間是沒有任何反應(yīng)的，當(dāng)動(dòng)畫時(shí)間執(zhí)行完畢后，會(huì)突然在界面上出現(xiàn)第一個(gè)圖片。

設(shè)計(jì)思想：為了解決這個(gè)問題，解決方案就是在這些圖片之后追加一個(gè)與第一張相同的圖片；這就是傳統(tǒng)輪播的主要設(shè)計(jì)思想。所以當(dāng)圖片滾動(dòng)到倒數(shù)第二章的時(shí)候；首先執(zhí)行滾動(dòng)動(dòng)畫，也就是滾動(dòng)到預(yù)先準(zhǔn)備的與第一張一模一樣的圖片，看起來似乎是滾動(dòng)到了第一張，其實(shí)不然。在動(dòng)畫執(zhí)行完畢后，立刻將content中所有的圖片拉回到第一張。流程圖如下：

所以此刻修改一點(diǎn)代碼，在代碼的開頭追加第一張圖片

/*克隆輪播的第一個(gè)li追加到最后*/ 
$("#container #content li").first().clone().appendTo($("#container #content"));

在rightBtnClick代碼中，將nowImage == totalCount - 1 修改為 nowImage == totalCount - 2。
2> 切換上一張(點(diǎn)擊左邊按鈕)

代碼與點(diǎn)擊右邊按鈕類似

$("#container #btn #leftBtn").click(function(){ 
 if(!$("#container #content").is(":animated")){ 
  if(nowImage == 0){ 
   nowImage = totalCount - 2; 
   $("#container #content").css("left",-560 * (totalCount - 1)); 
 
   $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
 
   $("#container #content").animate({"left": -560 * nowImage}, 1000); 
  } else { 
   nowImage--; 
   changeImage(); 
  } 
 } 
});

3> 點(diǎn)擊指示器按鈕進(jìn)行圖片切換
它的設(shè)計(jì)思路，就是獲取圖片的索引，然后調(diào)用changeImage函數(shù)就可以了。

$("#container #indicator li").click(function(){ 
 nowImage = $(this).index(); 
 changeImage(); 
});

4> 添加定時(shí)執(zhí)行動(dòng)畫的功能
也就是定時(shí)的調(diào)用點(diǎn)擊右邊按鈕的代碼；添加如下代碼:

var timer = setInterval(rightBtnClick, 2000);

5> 鼠標(biāo)懸停在圖片上，停止?jié)L動(dòng)；鼠標(biāo)離開圖片后，繼續(xù)滾動(dòng)
也就是對(duì)定時(shí)器進(jìn)行開啟和關(guān)閉；添加如下代碼:

$("#container").mouseenter(function(){ 
 clearInterval(timer); 
}).mouseleave(function(){ 
 timer = setInterval(rightBtnClick, 2000); 
});

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

至此，一個(gè)傳統(tǒng)輪播的效果就實(shí)現(xiàn)了，希望大家可以學(xué)以致用。

相關(guān)文章

最新評(píng)論