jQuery實(shí)現(xiàn)圖片漸入漸出切換展示效果
更新時(shí)間：2015年08月15日 09:55:32 作者：斯邁歐
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片漸入漸出切換展示效果,需要的朋友可以參考下
在這之前我們先看看我們要做的效果是什么樣的：
我們要圖片在過“一定時(shí)間”后自動(dòng)切換，在右下角處有小方塊似數(shù)字1,2,3,4，這些數(shù)字是根據(jù)圖片的個(gè)數(shù)自動(dòng)出現(xiàn)的，當(dāng)鼠標(biāo)經(jīng)過的時(shí)候數(shù)字顏色有一定的變化；
下面我們來看看具體怎么實(shí)現(xiàn)。
第一步：先寫簡(jiǎn)單的html頁面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.js" ></script>
<script type="text/javascript" src="scrollPic.js" ></script>
<link rel="stylesheet" href="scrollPic.css">
</head>
<body>
<div class="pic-slider-io">
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
</div>
</body>
</html>
頁面代碼解析：首先建立scrollPic.html,scrollPic.js,scrollPic.css。二話不說先把要的三個(gè)基本的文件建好；然后把它引入到html中在head頭部，其中注意
src="../js/jquery.js"
這個(gè)代碼的意思，“../”表示跳出上級(jí)目錄，然后在js文件夾下查找jquery.js文件；
在html頁面中，我們?cè)赽ody中添加一個(gè)class為'pic-slider-io'的div，在div中有一個(gè)ul，li下面有四張圖片，注意：圖片事先設(shè)置好命名，為1.jpg,2.jpg......方便在編寫scrollPic.js；
先看看這個(gè)時(shí)候什么都沒做的頁面樣式：
可以看到圖片是一原來的大小平鋪在頁面上的，一默認(rèn)ul li的方式展現(xiàn)在頁面上的；
現(xiàn)在我們要把它放在左下角；
第二步：編寫css樣式來控制它
首先控制div的展現(xiàn)：
.pic-slider-io{
height : 200px; //設(shè)置div的高為200px；
width : 800px; //設(shè)置div的寬為800px；
float : letf; //float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。
position : relative; //position 屬性規(guī)定元素的定位類型.這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定 //位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
overflow : hidden; //overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情.hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。
}
看一下頁面樣式：
看到所有圖片都在一起去了，圖片的本身大于div的寬高，所以overflow：hidden這個(gè)就把其他溢出的就不顯示了，不過這肯定不是我們想要的，不急繼續(xù)；
然后，我們現(xiàn)在控制ul的樣式：
.pic-slider-io ul{
margin : 0px; //設(shè)置上下左右的外邊距都為0；
padding : 0px;//設(shè)置上下左右的內(nèi)邊距都為0； 注意：margin,padding的設(shè)置是：上，右，下，左；如margin ： 2px,4px,5px,8px;分別對(duì)應(yīng)的是上，右，下，左；
height : auto; //自適應(yīng)高度，瀏覽器自動(dòng)計(jì)算
width : 100%; //寬度為100%
list-style-type : none; //把li的點(diǎn)去掉
float : left;
display : block; //此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符
position : absolute;//生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
top : 0;
left : 0;
z-index : 98;//z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
}
這個(gè)時(shí)候圖片就不顯示了，頁面看到的是把左上角那個(gè)點(diǎn)去掉了；
再次，我們控制li的樣式：
.pic-slider-io ul li {
height: auto;
width: 100%;
float: left;
padding: 0px;
margin: 0px;
overflow: hidden;
z-index:1; //這個(gè)li層就比ul那個(gè)疊層更高
}
這個(gè)樣式的設(shè)置主要是把li的疊層高于ul 就相當(dāng)于浮在ul上面；
最后，我們來看看img的樣式：
.pic-slider-io ul li img{
width: 100%;
z-index:1;//設(shè)置圖片和li在同一層上，這個(gè)應(yīng)該沒問題吧
}
現(xiàn)在我們來看看頁面成什么樣了：
看到，經(jīng)過樣式設(shè)置，整個(gè)圖片都顯示出來了；
第三步：編寫scrollPic.js
在編寫js的時(shí)候，我們要添加右下方的圖片數(shù)字顯示，我們事先把要添加的css寫好如下：
.pic-page-btn {//這是在父div中的子div樣式，用于顯示在右下角的數(shù)字承載模塊
float: left;
width: auto;
height: 30px;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 99; //他的疊層比父級(jí)div還要高，把這個(gè)按鈕樣式放在圖片之上
}
.pic-page-btn span{ //這個(gè)是設(shè)置子div的數(shù)字樣式
height: 30px;
width: 30px;
background-color: #999;
display: block;
float: left;
line-height: 30px;
text-align: center;
color: #FFF;
margin-right: 10px;
cursor:pointer;
}
.pic-page-btn .current {//這是將要設(shè)置鼠標(biāo)滑過改變其背景顏色
background-color: #1D5D76;
}
下面，我們來看看js的編寫，在這里不是視頻，就不一步一步的講了，我把各個(gè)解釋都注釋在js代碼中了
js代碼：
$(function(){
$.scrollPic = function (options){ //定義了一個(gè)scrollPic函數(shù)，有一個(gè)傳參，用于調(diào)用；
/************************開始整個(gè)默認(rèn)插件參數(shù)講解*******************************/
//整個(gè)defaults以花括號(hào)包含的是默認(rèn)的參數(shù)，調(diào)用此插件的只需要修改ele，Time，autoscroll即可；
var defaults={
ele: '.pic-slider-io', //pic-slider-io是一個(gè)class，css中定義了其樣式；
Time : '2000', //Time是定義了滑動(dòng)的時(shí)間；
autoscroll : true //autoscroll設(shè)為true表示自動(dòng)切換圖片；
};
/************************結(jié)束整個(gè)默認(rèn)插件參數(shù)講解*******************************/
//$.extend({},defaults, option)有{}主要是為了創(chuàng)建一個(gè)新對(duì)象，保留對(duì)象的默認(rèn)值。
var opts = $.extend({}, defaults, options);
//$(opts.ele)可以理解為取這個(gè)執(zhí)行，與$('.class1').click();類似表示，然后理解為賦值給PicObject；
//或者這樣理解,$(opts.ele)就是$('.pic-slider-io')，只不過（.pic-slider-io是個(gè)class作為參數(shù)，所以要(opts.ele)來表示）；
var PicObject = $(opts.ele);
//PicObject.find('ul')，這個(gè)可以理解成$(opts.ele).find('ul'),因?yàn)閛pts.ele其實(shí)就是取得的一個(gè)class，
//相當(dāng)于$('.pic-slider-io').find('ul');然后賦值給scrollList，所以整個(gè)就用scrollList來表示他；
var scrollList = PicObject.find('ul');
//同理scrollList.find('li')可以表示為$('.pic-slider-io').find('ul').find('li');所以這個(gè)是一層一層來查找的如果你看到html就會(huì)更加清晰；
var listLi = scrollList.find('li');
//圖片的命名是1.jpg,2.jpg,這樣的，index是用來表示圖片的名字的初始化賦值為0；
var index = 0;
//這是定義一個(gè)picTimer(自動(dòng)切換函數(shù))的函數(shù)；
var picTimer;
//一個(gè)li中包含一個(gè)圖片，所以這是查找有多少個(gè)圖片，賦值給len；
var len = PicObject.find('li').length;
/*****************開始自動(dòng)切換函數(shù)************************/
function picTimer(){
showPic(index);//調(diào)用showPic(index)函數(shù)(在下面)
index++;
if(index == len){//如果index的值等于len，就表示從第一張圖片到最后一張圖片切換完了，然后是index賦值為0重新開始
index=0;
}
}
/*****************結(jié)束自動(dòng)切換函數(shù)************************/
//setInterval() 方法可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。
//setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉
//此判斷為如果autoscroll為true，則不停的調(diào)用picTimer函數(shù)，以Time的速度調(diào)用
if(opts.autoscroll){
var time = setInterval(picTimer,opts.Time);
}
/*****************開始動(dòng)畫函數(shù)************************/
function showPic(index){//定義動(dòng)畫函數(shù)
//listLi是找到第一個(gè)li，然后隱藏他，listLi在var listLi = scrollList.find('li');已經(jīng)介紹了
listLi.hide();
//fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的。siblings()方法是遍歷。
listLi.eq(index).fadeIn(500).siblings().hide();
//找到paging對(duì)應(yīng)的css樣式，如果與當(dāng)前的index一致，則添加class為current的css樣式，否則就移除。
PicObject.find(paging).eq(index).addClass('current').siblings().removeClass('current');
}
/*****************結(jié)束動(dòng)畫函數(shù)************************/
//這是在class為pic-slider-io的div中添加一個(gè)class為pic-page-btn的子div。
//主要是設(shè)置右下角數(shù)字的承載
PicObject.append('<div class="pic-page-btn"></div>');
//在這個(gè)class為pic-page-btn的子div中添加圖片張數(shù)對(duì)應(yīng)的數(shù)字個(gè)數(shù)，1,2,3，，，，，
//從這可以看出來，數(shù)字不是自己一個(gè)個(gè)添得，是根據(jù)li的個(gè)數(shù)，也就是圖片的個(gè)數(shù)自動(dòng)生成的
for( i=1;i<=len;i++){
PicObject.find('.pic-page-btn').append('<span>'+i+'</span>');
}
//這個(gè)就是和上面講listLi一樣的
var paging = PicObject.find('.pic-page-btn span');
//為相應(yīng)的右下角的數(shù)字改變其背景顏色
paging.eq(index).addClass('current');
}
});
在這我們差不多完成了圖片的切換，
然后我們?cè)趆tml中先調(diào)用默認(rèn)的看一看：
調(diào)用方式：
<script type="text/javascript">
$(function(){
$.scrollPic();
});
</script>
看一下界面顯示：
看箭頭所示，說明可以自動(dòng)切換了圖片；
可是我們還有當(dāng)鼠標(biāo)在右下角1,2,3,4上滑過的時(shí)候，可以切換圖片，所以我們就在js中加個(gè)事件就可以了：
//鼠標(biāo)經(jīng)過1、2、3、4的效果
PicObject.find(paging).mouseover(function(){
index = PicObject.find(paging).index($(this));
showPic(index); //調(diào)用showPic(index)函數(shù)。
});
//鼠標(biāo)經(jīng)過1、2、3、4的效果
//清除計(jì)時(shí)器
//當(dāng)鼠標(biāo)懸浮在1,2,3,4上面的時(shí)候，就相當(dāng)于要切換圖片了
//所以我們就要清除計(jì)時(shí)器，重新來過了
PicObject.hover(function(){
clearInterval(time);//這個(gè)是相對(duì)于setInterva()的；
},function(){
if(opts.autoscroll){
time = setInterval(picTimer,opts.Time);
}else{
clearInterval(time);
}
});
把這段代碼加如到j(luò)s中，加到什么位置就不要說了吧！加到
paging.eq(index).addClass('current');
后面就可以了；
這樣整個(gè)這個(gè)圖片切換的一個(gè)插件就算完成了；
如果需要調(diào)用函數(shù)，可以修改ele,Timer,autoscroll.
看一下帶參數(shù)使用插件：
<script type="text/javascript">
$(function(){
$.scrollPic({
ele: '.pic-slider-io', //插件應(yīng)用div
Time:'3000', //自動(dòng)切換時(shí)間
autoscroll:true, //設(shè)置是否自動(dòng)漸變
});
});
</script>
好了，整個(gè)插件的講述就算是完成了，希望大家可以從中學(xué)到知識(shí)，如有不足，還望諒解！（最后說一句，在整個(gè)js的編寫時(shí)，最好在$(function(){});的最前面加個(gè)分號(hào)，防止與其他js沖突）
您可能感興趣的文章:
- jquery動(dòng)態(tài)切換背景圖片的簡(jiǎn)單實(shí)現(xiàn)方法
- jQuery代碼實(shí)現(xiàn)圖片墻自動(dòng)+手動(dòng)淡入淡出切換效果
- jQuery+css實(shí)現(xiàn)的切換圖片功能代碼
- jQuery插件實(shí)現(xiàn)帶圓點(diǎn)的焦點(diǎn)圖片輪播切換
- jquery+css實(shí)現(xiàn)動(dòng)感的圖片切換效果
- JQuery實(shí)現(xiàn)簡(jiǎn)單的圖片滑動(dòng)切換特效
- jQuery圖片輪播滾動(dòng)切換代碼分享
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jquery的幻燈片圖片切換效果代碼分享
- jquery圖片傾斜層疊切換特效代碼分享
- jquery實(shí)現(xiàn)LED廣告牌旋轉(zhuǎn)系統(tǒng)圖片切換效果代碼分享
- jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法
- jQuery實(shí)現(xiàn)圖片向左向右切換效果的簡(jiǎn)單實(shí)例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JQuery ztree帶篩選、異步加載實(shí)例，zTree支持靜態(tài) 和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)，并支持極其靈活的checkbox或radio選擇功能，本文為大家進(jìn)行具體介紹2016-02-02
這篇文章主要介紹了jQuery替換textarea中換行的方法,涉及jQuery操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-06-06
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作(2)
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，針對(duì)EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作，分為三大方面：動(dòng)態(tài)加載、添加分頁、以及惰性加載節(jié)點(diǎn)，感興趣的小伙伴們可以參考一下2015-11-11
利用imgareaselect輔助后臺(tái)實(shí)現(xiàn)圖片上傳裁剪
這篇文章主要為大家詳細(xì)介紹了利用imgareaselect輔助后臺(tái)實(shí)現(xiàn)圖片裁剪的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
jQuery中filter()和find()的區(qū)別深入了解
一直不是很清楚filter()方法和find()方法的區(qū)別，看jQuery Cookbook一書后，終于算是搞清楚了，下面將新的與大家分享下2013-09-09
這篇文章主要介紹了jQuery遍歷Table的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
jquery 學(xué)習(xí)之二 屬性(類),需要的朋友可以參考下。2010-11-11
取消選中單選框radio，第一種，第二種方式是使用jQuery實(shí)現(xiàn)的，第三種方式是基于JS和DOM實(shí)現(xiàn)的，大家可以看看下面的示例2014-09-09
jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
2008-10-10