快捷導(dǎo)航

jQuery 圖片切換插件(代碼比較少)

更新時(shí)間：2012年05月07日 23:49:56 作者：

jQuery 插件圖片切換第一次自已償試寫插件，需要的朋友可以參考下

 
// JavaScript Document 
;(function($){ 
$.fn.extend({ 
"zj_ppt":function(value){ 

//默認(rèn)參數(shù)定義 
var $this = $(this); 
value = $.extend({ 
"time":2000, //間隔變化動(dòng)畫時(shí)間 
"con":0, 
"sto":true, 
"count":"count", //切換小圖的父級(jí)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; 
} 
} 

//每間隔多少時(shí)間執(zhí)行一次圖片切換 
function sett(){ 
if(value.sto){autopic()}; 
setTimeout(sett,value.time); 
} 

//鼠標(biāo)懸停時(shí)切換圖片，并停止自動(dòng)切換 
$(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(); 

//反回原對(duì)像，以便連綴JQuery的其它方法 
return $this; 
} 
}); 
})(jQuery); 

以上是插件部分代碼；

下面可以下載demo /201205/yuanma/myPPT_jb51.rar

您可能感興趣的文章:

相關(guān)文章

jQuery fadeOut 異步實(shí)例代碼詳解
fadeOut() 方法逐漸改變被選元素的不透明度，從可見到隱藏（褪色效果）。這篇文章給大家介紹jquery fadeout異步實(shí)例代碼，感興趣的朋友一起看下吧
2016-08-08
jquery與ajax獲取特殊字符實(shí)例詳解
在用jquery加ajax寫的時(shí)候，發(fā)現(xiàn)如果傳進(jìn)去的數(shù)據(jù)包含&則無(wú)法獲取數(shù)據(jù)而+號(hào)的話就會(huì)被判定為空，解決辦法就是使用encodeURIComponent()函數(shù)對(duì)要發(fā)送的數(shù)據(jù)進(jìn)行編碼,需要的朋友可以參考下
2017-01-01
jquery 實(shí)現(xiàn)表單驗(yàn)證功能代碼(簡(jiǎn)潔)
jquery 實(shí)現(xiàn)表單驗(yàn)證功能代碼,代碼比較簡(jiǎn)潔，需要的朋友可以參考下
2012-07-07
Jquery刪除css屬性的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇Jquery刪除css屬性的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-12-12
jQuery源碼分析之Event事件分析
對(duì)于javascript事件擴(kuò)展，所有的lib都差不多。和jquery和prototype,yui和Ext，其要解決的首要問題是兼容性，所有 lib都會(huì)對(duì)event進(jìn)行包裹，統(tǒng)一其屬性解決其兼容性。
2010-06-06
jQuery實(shí)現(xiàn)給頁(yè)面換膚的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)給頁(yè)面換膚的方法,涉及jQuery頁(yè)面元素的選擇與樣式的操作,需要的朋友可以參考下
2015-05-05
探討在JQuery和Js中,如何讓ajax執(zhí)行完后再繼續(xù)往下執(zhí)行
查了不少資料，最后，還是jquery指南的書上找到了詳細(xì)的參數(shù)（async: false,），做好后，示例代碼放上，如下所示，需要的朋友可以參考下
2013-07-07
jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
這篇文章主要介紹了jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery事件綁定、解綁、事件冒泡、阻止冒泡等相關(guān)原理與應(yīng)用技巧,需要的朋友可以參考下
2019-05-05
jquery獲取input輸入框中的值
如何用javascript獲取input輸入框中的值，js/jq通過name、id、class獲取input輸入框中的value。接下來(lái)本文通過代碼講解，需要的朋友參考下
2019-11-11
教你用jquery實(shí)現(xiàn)iframe自適應(yīng)高度
iframe因?yàn)槟芎途W(wǎng)頁(yè)無(wú)縫的結(jié)合從而不刷新頁(yè)面的情況下更新頁(yè)面的部分?jǐn)?shù)據(jù)成為可能，可是 iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來(lái)了使用上的麻煩，給iframe設(shè)置高度的時(shí)候多了也不好，少了更是不行，今天我們就來(lái)分享2種使用jquery實(shí)現(xiàn)iframe自適應(yīng)高度的代碼
2014-06-06