jQuery 圖片切換插件(代碼比較少)
更新時(shí)間:2012年05月07日 23:49:56 作者:
jQuery 插件圖片切換 第一次自已償試寫(xiě)插件,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
// JavaScript Document
;(function($){
$.fn.extend({
"zj_ppt":function(value){
//默認(rèn)參數(shù)定義
var $this = $(this);
value = $.extend({
"time":2000, //間隔變化動(dòng)畫(huà)時(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
您可能感興趣的文章:
- 一個(gè)基于jquery的圖片切換效果
- 基于Jquery的簡(jiǎn)單圖片切換效果
- jQuery 一個(gè)圖片切換的插件
- jQuery下通過(guò)replace字符串替換實(shí)現(xiàn)大小圖片切換
- jquery實(shí)現(xiàn)的帶縮略圖的焦點(diǎn)圖片切換(自動(dòng)播放/響應(yīng)鼠標(biāo)動(dòng)作)
- jquery焦點(diǎn)圖片切換(數(shù)字標(biāo)注/手動(dòng)/自動(dòng)播放/橫向滾動(dòng))
- jquery仿QQ商城帶左右按鈕控制焦點(diǎn)圖片切換滾動(dòng)效果
- JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)
- jQuery簡(jiǎn)單實(shí)現(xiàn)banner圖片切換
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
- 基于jquery實(shí)現(xiàn)鼠標(biāo)滾輪驅(qū)動(dòng)的圖片切換效果
- 基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
- jquery+css實(shí)現(xiàn)動(dòng)感的圖片切換效果
相關(guān)文章
jquery 實(shí)現(xiàn)表單驗(yàn)證功能代碼(簡(jiǎn)潔)
jquery 實(shí)現(xiàn)表單驗(yàn)證功能代碼,代碼比較簡(jiǎn)潔,需要的朋友可以參考下2012-07-07
jQuery實(shí)現(xiàn)給頁(yè)面換膚的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)給頁(yè)面換膚的方法,涉及jQuery頁(yè)面元素的選擇與樣式的操作,需要的朋友可以參考下2015-05-05
探討在JQuery和Js中,如何讓ajax執(zhí)行完后再繼續(xù)往下執(zhí)行
查了不少資料,最后,還是jquery指南的書(shū)上找到了詳細(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實(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

