基于jQuery實(shí)現(xiàn)的幻燈圖片切換
更新時間:2016年12月02日 17:02:55 作者:船長op
本篇文章分享了基于jQuery實(shí)現(xiàn)的幻燈圖片切換效果的部分代碼。感興趣的朋友可以下載實(shí)例運(yùn)行,下面就跟小編一起來看看吧
話不多說,直接附上源碼,僅供大家參考
// JavaScript Document
;(function($){
$.fn.extend({
"zj_ppt":function(value){
//默認(rèn)參數(shù)定義
var $this = $(this);
value = $.extend({
"time":2000, //間隔變化動畫時間
"con":0,
"sto":true,
"count":"count", //切換小圖的父級class名字
"src":"src", //切換小圖片路徑
"src_cur":"src_cur" //當(dāng)前切換小圖片路徑
},value);
//圖片切換函數(shù)
function autopic(){
$("li",$this[0]).hide();
$("li:eq("+value.con+")",$this[0]).show();
$(value.count).find("ul li img").attr("src",value.src);
$(value.count).find("ul li img:eq("+value.con+")").attr("src",value.src_cur);
if(value.con>$("li",$this[0]).length-2){
value.con = 0;
}else{
value.con += 1;
}
}
//每間隔多少時間執(zhí)行一次圖片切換
function sett(){
if(value.sto){autopic()};
setTimeout(sett,value.time);
}
//鼠標(biāo)懸停時切換圖片,并停止自動切換
$(value.count).find("ul li").hover(function(){
var _index = $(this).index();
value.con = _index;
value.sto = false;
autopic();
},function(){
var _index = $(this).index();
value.sto = true;
value.con = _index;
});
sett();
//反回原對像,以便連綴JQuery的其它方法
return $this;
}
});
})(jQuery);
以上是插件部分代碼;
下面可以下載demo
demo下載地址:http://xiazai.jb51.net/yuanma/myPPT(jb51.net).rar
以上就是本文的全部內(nèi)容,希望對大家有所幫助,謝謝對腳本之家的支持!
您可能感興趣的文章:
- jquery實(shí)現(xiàn)圖片切換代碼
- 完美JQuery圖片切換效果的簡單實(shí)現(xiàn)
- 基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
- 基于jquery實(shí)現(xiàn)鼠標(biāo)滾輪驅(qū)動的圖片切換效果
- jQuery實(shí)現(xiàn)的Tab滑動選項卡及圖片切換(多種效果)小結(jié)
- jQuery插件Slider Revolution實(shí)現(xiàn)響應(yīng)動畫滑動圖片切換效果
- jquery簡單實(shí)現(xiàn)圖片切換效果的方法
- jquery圖片切換實(shí)例分析
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動端幻燈片圖片切換特效
- jquery簡單圖片切換顯示效果實(shí)現(xiàn)方法
- 完美兼容各大瀏覽器的jQuery插件實(shí)現(xiàn)圖片切換特效
相關(guān)文章
jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法說明
本篇文章主要是對jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02
artDialog雙擊會關(guān)閉對話框的修改過程分享
artDialog,一個jquery的對話框插件但是在使用時發(fā)現(xiàn)鼠標(biāo)雙擊時會自半對話框,下面與大家分享下具體的修改過程,感興趣的朋友可以參考下2013-08-08
jQuery快速實(shí)現(xiàn)商品數(shù)量加減的方法
這篇文章主要介紹了 jQuery快速實(shí)現(xiàn)商品數(shù)量加減的方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02
jQuery中使用了document和window哪些屬性和方法小結(jié)
未列出常見的比如document.getElementById(),object.addEventListener()等。2011-09-09
jquery表單驗(yàn)證插件(jquery.validate.js)的3種使用方式
這篇文章主要介紹了jquery表單驗(yàn)證插件(jquery.validate.js)的3種使用方式,本文用詳細(xì)的代碼實(shí)例講解jquery表單驗(yàn)證插件的使用,需要的朋友可以參考下2015-03-03
通過jQuery源碼學(xué)習(xí)javascript(一)
最近在做日志統(tǒng)計程序,發(fā)現(xiàn)對方的程序是在Jquery基礎(chǔ)上進(jìn)行開發(fā)的,而公司的網(wǎng)站的框架是prototype。而且我也早就想了解一下Jquery源碼,故決定研究Jquery源碼,模擬它的方法2012-12-12

