jQuery動畫效果圖片輪播特效
從這一章節(jié)開始，我將會為大家陸續(xù)的介紹利用Jquery完成特效動畫。先來看看這一節(jié)所介紹的特效：傳統(tǒng)輪播。
一、需求分析
1. 提供很多尺寸相等的圖片，一排緊挨著顯示。
2. 左右有兩個切換按鈕，用來控制顯示上一張還是下一張。
3. 右下方有指示器"小圈圈"，用來提示顯示到第幾個圖片；也可以點擊它，進行圖片的切換。
4. 每隔一個固定的時間，圖片會自動滾動。
5. 當(dāng)鼠標(biāo)放到圖片上面的時候，會停止自動滾動；當(dāng)鼠標(biāo)離開后，再經(jī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，是整個輪播效果的容器。
2> id為content的ul，里面存放的內(nèi)容就是界面上面顯示的滾動的圖片。
3> id為btn的div，里面的兩個子元素就是用來切換上一張還是下一張的按鈕。
4> id為indicator的ul，用來顯示指示器。
2. CSS代碼改變顯示樣式
1> 下面兩句代碼，清除掉瀏覽器默認的間隙。
*{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這個屬性的話，就露餡了，去掉這個屬性的話，效果如下：)。
也就是說，如果不加上overflow: hidden 這個屬性的話，所有的圖片就會一排全部顯示出來了。
最后一個就是定位屬性 position: relative; 由于container是父容器，所以應(yīng)該設(shè)置為relative，而它的所有的子元素要進行絕對定位的話，他們的position應(yīng)該設(shè)置為absolute。這就是所謂的 "子絕父相" 原則。在絕對定位中都這么使用。
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，這是為了保證它能夠存放足夠多的圖片。默認情況下，content中所有的li是塊級元素，也就是他們會上下排列；所以加了一句float:left；讓他們左右排列。而父級元素container設(shè)置了overflow: hidden, 所以這些左右排列的圖片只能看到第一個。
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;
}
注意到，在獲取左右按鈕的時候，他們是取自同一張圖片icons.png。只是圖片截取的位置不一致，這就是所謂的"精靈"。就是為了減小圖片占用大小，而把很多的小icon放置在一張圖片上面，然后通過定位截取的辦法，獲取想要的部分。（注：關(guān)于怎樣定位icon？ 1. 寫代碼慢慢調(diào)節(jié)；2. 用精靈裁切定位軟件，如：CSS Sprites等）。圖片設(shè)計大致如下：
這張圖片中，不僅包含了左右切換按鈕，指示器的按鈕也一并給出了，所以在書寫指示器按鈕的css代碼時候，同樣也可以使用這張圖片。
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的圖片就是上圖中實心的大圓圈。所以剛開始的時候，默認選中第一個。
3. 用JQuery添加交互效果
1> 切換下一張(點擊右邊按鈕)
$(function(){
// 總的圖片個數(shù)(用代碼獲取個數(shù)，擴展性比較強)
var totalCount = $("#container #content li").length;
// 當(dāng)前處于第幾個圖片
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ù)中，先進行了content是否正在進行動畫的判斷，這樣做的目的：防止動畫在執(zhí)行的過程，用戶又進行強制的執(zhí)行其他動畫，會產(chǎn)生干擾，最終導(dǎo)致動畫效果混亂。
如果有的話，則將標(biāo)志變量nowImage指向下一個圖片，并且執(zhí)行changeImage函數(shù)中的代碼：1. 將content中的所有圖片左移一個圖片大小的寬度；2.將指示器的圖片也移動到對應(yīng)的位置。
如果沒有的話，并且圖片現(xiàn)在是顯示到了最后一個，則先執(zhí)行動畫，執(zhí)行完畢后，立刻將content中所有的圖片內(nèi)容拉回到第一個，但是這里任然會穿幫，因為當(dāng)前圖片顯示為最后一個后，你繼續(xù)執(zhí)行動畫，是沒有任何效果的，所以在這個動畫執(zhí)行期間是沒有任何反應(yīng)的，當(dāng)動畫時間執(zhí)行完畢后，會突然在界面上出現(xiàn)第一個圖片。
設(shè)計思想：為了解決這個問題，解決方案就是在這些圖片之后追加一個與第一張相同的圖片；這就是傳統(tǒng)輪播的主要設(shè)計思想。所以當(dāng)圖片滾動到倒數(shù)第二章的時候；首先執(zhí)行滾動動畫，也就是滾動到預(yù)先準(zhǔn)備的與第一張一模一樣的圖片，看起來似乎是滾動到了第一張，其實不然。在動畫執(zhí)行完畢后，立刻將content中所有的圖片拉回到第一張。流程圖如下：
所以此刻修改一點代碼，在代碼的開頭追加第一張圖片
/*克隆輪播的第一個li追加到最后*/
$("#container #content li").first().clone().appendTo($("#container #content"));
在rightBtnClick代碼中，將nowImage == totalCount - 1 修改為 nowImage == totalCount - 2。
2> 切換上一張(點擊左邊按鈕)
代碼與點擊右邊按鈕類似
$("#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> 點擊指示器按鈕進行圖片切換
它的設(shè)計思路，就是獲取圖片的索引，然后調(diào)用changeImage函數(shù)就可以了。
$("#container #indicator li").click(function(){
nowImage = $(this).index();
changeImage();
});
4> 添加定時執(zhí)行動畫的功能
也就是定時的調(diào)用點擊右邊按鈕的代碼；添加如下代碼:
var timer = setInterval(rightBtnClick, 2000);
5> 鼠標(biāo)懸停在圖片上，停止?jié)L動；鼠標(biāo)離開圖片后，繼續(xù)滾動
也就是對定時器進行開啟和關(guān)閉；添加如下代碼:
$("#container").mouseenter(function(){
clearInterval(timer);
}).mouseleave(function(){
timer = setInterval(rightBtnClick, 2000);
});
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
至此，一個傳統(tǒng)輪播的效果就實現(xiàn)了，希望大家可以學(xué)以致用。
- jQuery動畫與特效詳解
- JQuery 動畫卷頁 返回頂部 動畫特效(兼容Chrome)
- 基于jquery和svg實現(xiàn)超炫酷的動畫特效
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過顯示動畫邊框特效
- 基于jquery css3實現(xiàn)點擊動畫彈出表單源碼特效
- jQuery圖片切換動畫特效
- jQuery+jRange實現(xiàn)滑動選取數(shù)值范圍特效
- JQuery實現(xiàn)簡單的圖片滑動切換特效
- jquery實現(xiàn)滑動特效代碼
- 基于jQuery制作小圖標(biāo)上下滑動特效
- jQuery 常用特效實例小結(jié)【顯示與隱藏、淡入淡出、滑動、動畫等】
相關(guān)文章
jQuery二級聯(lián)動插件：jQuery.selected 一個頁面可以引用多個聯(lián)動效果2012-03-03
jQuery內(nèi)置的AJAX功能和JSON的使用實例
通過jQuery內(nèi)置的AJAX功能，訪問后臺獲得JSON格式的數(shù)據(jù)，然后通過jQuer把數(shù)據(jù)直接在頁面上顯示,需要的朋友可以參考下2014-07-07
jQuery獲取Select選擇的Text和Value(詳細匯總)
Select選擇的Text和Value在使用中可能都需要獲取到它們的值，以至搜集用戶的需求，本文整理了一些常用而實用的操作技巧，感興趣的朋友可以了解下，就當(dāng)鞏固自己的知識了，希望本文對你有所幫助2013-01-01
這篇文章主要介紹了jquery+php隨機生成紅包金額數(shù)量實現(xiàn)代碼，紅包數(shù)量與金錢可以自己設(shè)定，很實用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要為大家詳細介紹了jQuery內(nèi)容篩選選擇器實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jquery.artwl.thickbox.js 一個非常簡單好用的jQuery彈出層插件
jquery.artwl.thickbox.js 一個非常簡單好用的jQuery彈出層插件，需要的朋友可以參考下2012-03-03
jQuery插件jFade實現(xiàn)鼠標(biāo)經(jīng)過的圖片高亮其它變暗
本文給大家介紹的是一款重點突出的jQuery特效插件效果，使用jFade實現(xiàn)鼠標(biāo)經(jīng)過的圖片高亮其它變暗，非常實用，推薦給小伙伴們參考下。2015-03-03
Ztree是一個使用jQuery實現(xiàn)的JSP頁面的各種功能樹，本文介紹一個異步獲取數(shù)據(jù)到下拉樹的實現(xiàn)方式,感興趣的朋友可以了解下，或許對你學(xué)習(xí)ztree有所幫助2013-02-02
這篇文章主要為大家分享了7個jQuery最佳實踐，在使用JavaScript庫的時候，有哪些最佳實踐，又有哪些不好的實踐呢？感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了jQuery焦點圖插件SaySlide，新版的SaySlide 2.0重構(gòu)了代碼，并基本上保留了原有的功能，感興趣的小伙伴們可以參考一下2015-12-12