jQuery焦點(diǎn)圖插件SaySlide
更新時(shí)間：2015年12月21日 11:45:30 投稿：lijiao
這篇文章主要介紹了jQuery焦點(diǎn)圖插件SaySlide，新版的SaySlide 2.0重構(gòu)了代碼，并基本上保留了原有的功能，感興趣的小伙伴們可以參考一下
先來(lái)介紹SaySlide 2.0支持自定義如下功能：
- 1、上下左右方向播放以及jQuery的fadeOut、slideUp、hide效果；
- 2、自動(dòng)播放時(shí)間間隔和動(dòng)畫(huà)播放的的速度；
- 3、是否顯示標(biāo)題；
- 4、是否在新窗口打開(kāi)鏈接；
- 5、是否顯示底部半透明背景；
- 6、按鈕在底部顯示的位置（左中右）；
- 7、按鈕默認(rèn)背景色；
- 8、按鈕激活狀態(tài)顏色；
- 9、設(shè)置標(biāo)題文字的樣式；
- 10、觸發(fā)按鈕的事件；
下面就是重點(diǎn)的代碼，分享給大家供大家參考，具體代碼如下
(function($){
$.fn.saySlide=function(options){
var defaults={
autoTime:3000,//自動(dòng)播放時(shí)間間隔
speed:500,//切換速度
autodir:'RL',//自動(dòng)播放方向，LR左到右，RL右到左，TB上到下，BT下到上, jQuery自帶的動(dòng)畫(huà)：jq.fadeOut , jq.slideUp , jq.hide
isTitle:false,//是否顯示標(biāo)題
isBlank:true,//是否在新窗口打開(kāi)鏈接
isBottombg:true,//是否顯示底部半透明背景,該設(shè)置只有在isTitle為false生效
defaultBg:"#999999",//定義底部按鈕默認(rèn)顏色
currentBg:"#ffffff",//定義底部按鈕激活狀態(tài)顏色
btnAlign:"center",//按鈕左中右位置，left,center,right
fontSize:"14px"
};
var _this=$(this), len=_this.children().length, _thisChildren;
options.Width=_this.width() || 0;
options.Height=_this.height() || 0;
options.Imgs=options.ImgsO=_this.children();
options.nowImg=0;
options.isLink = $(options.Imgs[0]).attr("href") === undefined ? false : true; //根據(jù)第一張圖片是否有href屬性來(lái)判斷是否給圖片加上鏈接
var options=$.extend(defaults,options);
switch(options.autodir){
case "LR":options.pos="right";break;
case "RL":options.pos="left";break;
case "BT":options.pos="top";break;
case "TB":options.pos="bottom";break;
default:
if(/jq\\./.test(options.autodir)){
options.jq=options.autodir.slice(3);
options.autodir="jq";
}else{
alert("autodir參數(shù)不正確");
}
}
var SaySlide=function(opt){
this.opt=opt;
}
SaySlide.prototype={
_init:function(){
this.BulkImgs();
this.AutoPlay();
this.PausePlay();
this.BtnClick();
},
BoxBtn:function(){
var me=this.opt, boxHtml='';
for(var i=0;i<len;i++){
var bg=i==0?me.currentBg:me.defaultBg;
boxHtml+='<i style="background-color:'+ bg +'" index="'+ i +'"></i>';
}
var textAlign=me.isTitle==true ? "right" : me.btnAlign;
boxHtml='<div class="saySlide-bottom-btn" style="text-align:'+ textAlign +'"><span>'+ boxHtml +'</span></div>';
return boxHtml;
},
BulkImgs:function(){
var me=this.opt, ImgsArr=new Array;
for(var i=0;i<len;i++){
if(me.isLink===true){
var link=$(me.Imgs[i]).attr({"width":me.Width,"height":me.Height}).attr("href");
$(me.Imgs[i]).removeAttr("href");
ImgsArr[i]="<a href='"+ link +"' index='"+ i +"'>"+me.Imgs[i].outerHTML+'</a>';
}else{
$(me.Imgs[i]).attr({"width":me.Width,"height":me.Height});
ImgsArr[i]="<a index='"+ i +"'>"+me.Imgs[i].outerHTML+'</a>';
}
}
if(me.autodir=="LR" || me.autodir=="TB" || me.autodir=="jq"){
var ImgsStr=ImgsArr.reverse().join('');
}else{
var ImgsStr=ImgsArr.join('');
}
_this.html(ImgsStr);
me.Imgs=_this.children();
if(me.autodir!="jq"){
_this.wrapInner("<div class='saySlide-box' />");
_thisChildren=_this.children("div.saySlide-box");
var divWidth=me.autodir=="LR" || me.autodir=="RL" ? me.Width*len :me.Width;
_thisChildren.width(divWidth).css(me.pos,"0");
}else{
_this.addClass("saySlide-fade");
}
var opacityBg=me.isBottombg===true || me.isTitle===true ? '<div class="saySlide-opacity-bg"></div>' : '';//如果有標(biāo)題，則透明背景強(qiáng)制顯示
_this.append(this.BoxBtn() + opacityBg);
me.BtnArr=_this.find("i");
if(me.isTitle===true){
this.BuildTitle();
}
},
/* 構(gòu)造標(biāo)題 */
BuildTitle:function(){
var _w=14*len, me=this.opt;
_w=me.Width - _w - 20 - 40;
_this.append('<div class="saySlide-title" />');
me.titleBox=_this.children("div.saySlide-title").css({"font-size":me.fontSize,width:_w});
me.titleBox.text($(me.ImgsO[0]).attr("alt"));
},
/* 自動(dòng)播放 */
AutoPlay:function(){
var self=this, me=this.opt;
self.t=setInterval(function(){
self.PicPlay();
},me.autoTime);
},
/* 鼠標(biāo)經(jīng)過(guò)時(shí)清除定時(shí) */
PausePlay:function(){
var self=this;
_this.hover(function(){
clearInterval(self.t);
},function(){
self.AutoPlay();
});
},
PicPlay:function(){
var me=this.opt;
if(me.autodir=="RL" || me.autodir=="BT"){
this.MoveV(me.autodir);
}else if(me.autodir=="LR" || me.autodir=="TB"){
this.MoveH(me.autodir);
}else if(me.autodir=="jq"){
this.MovejQ();
}
var current=me.nowImg > len-1 ? 0 : me.nowImg;
$(me.BtnArr[current]).css("background-color",me.currentBg).siblings().css("background-color",me.defaultBg);
if(me.isTitle===true){
me.titleBox.text($(me.ImgsO[current]).attr("alt"));
}
},
/* 點(diǎn)擊標(biāo)簽按鈕 */
BtnClick:function(){
var self=this, me=this.opt;
_this.delegate("i","click",function(){
var clicked=parseInt($(this).attr("index"));
me.nowImg=clicked;
if(me.autodir=="RL" || me.autodir=="BT"){
var prevImgs=_thisChildren.find("a[index='"+ clicked +"']").prevAll();
prevImgs=$.makeArray(prevImgs).reverse();
_thisChildren.css(me.pos,"0");
$(prevImgs).appendTo(_thisChildren);
}else if(me.autodir=="LR" || me.autodir=="TB"){
var prevImgs=_thisChildren.find("a[index='"+ clicked +"']").nextAll();
_thisChildren.css(me.pos,"0");
$(prevImgs).prependTo(_thisChildren);
}else if(me.autodir=="jq"){
var prevImgs=_this.find("a[index='"+ clicked +"']").nextAll("a");
prevImgs.prependTo(_this);
}
$(this).css("background-color",me.currentBg).siblings().css("background-color",me.defaultBg);
});
},
/* 從右到左播放 、 從下到上播放 */
MoveV:function(type){
var me=this.opt, current;
me.nowImg = me.nowImg+1 > len ? 1 : me.nowImg+1;
current = me.nowImg - 1;
if(type=="RL"){
_thisChildren.animate({"left":"-"+me.Width},me.speed,function(){
$(me.Imgs[current]).appendTo($(this));
$(this).css("left","0");
});
}else if(type=="BT"){
_thisChildren.animate({"top":"-"+me.Height},me.speed,function(){
$(me.Imgs[current]).appendTo($(this));
$(this).css("top","0");
});
}
},
/* 淡入淡出 */
MovejQ:function(){
var me=this.opt, current;
me.nowImg = me.nowImg+1 > len-1 ? 0 : me.nowImg+1;
current = len - me.nowImg == len ? 0 : len-me.nowImg;
var arg1=me.speed;
var arg2=function(){$(this).prependTo(_this).show();};
if(me.jq=="fadeOut"){
$(me.Imgs[current]).fadeOut(arg1,arg2);
}else if(me.jq=="hide"){
$(me.Imgs[current]).hide(arg1,arg2);
}else if(me.jq=="slideUp"){
$(me.Imgs[current]).slideUp(arg1,arg2);
}else{
return ;
}
},
/* 從左到右播放 、 從上到下播放 */
MoveH:function(type){
var me=this.opt, current;
me.nowImg = me.nowImg+1 > len-1 ? 0 : me.nowImg+1;
current = len - me.nowImg == len ? 0 : len-me.nowImg;
if(type=="LR"){
_thisChildren.animate({"right":"-"+me.Width},me.speed,function(){
$(me.Imgs[current]).prependTo($(this));
$(this).css("right","0");
});
}else if(type=="TB"){
_thisChildren.animate({"bottom":"-"+me.Height},me.speed,function(){
$(me.Imgs[current]).prependTo($(this));
$(this).css("bottom","0");
});
}
}
}
var _SaySlide=new SaySlide(options);
_SaySlide._init();
}
})(jQuery);
以上就是焦點(diǎn)圖插件SaySlide的代碼，對(duì)關(guān)鍵代碼進(jìn)行注釋，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- 基于Jquery實(shí)現(xiàn)焦點(diǎn)圖淡出淡入效果
- jQuery實(shí)現(xiàn)標(biāo)題有打字效果的焦點(diǎn)圖代碼
- 基于jQuery全屏焦點(diǎn)圖左右切換插件responsiveslides
- jQuery焦點(diǎn)圖輪播特效代碼分享（3款）
- jquery帶下拉菜單和焦點(diǎn)圖代碼分享
- jQuery實(shí)現(xiàn)仿Alipay支付寶首頁(yè)全屏焦點(diǎn)圖切換特效
- jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法
- jQuery實(shí)現(xiàn)企業(yè)網(wǎng)站橫幅焦點(diǎn)圖切換功能實(shí)例
- jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無(wú)縫滾動(dòng)切換特效
- jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果
相關(guān)文章
jquery驗(yàn)證手機(jī)號(hào)是否正確實(shí)例講解
這篇文章主要介紹了一個(gè)jquery驗(yàn)證手機(jī)號(hào)是否正確的實(shí)踐案例，利用正則表達(dá)式進(jìn)行驗(yàn)證，感興趣的小伙伴們可以參考一下2015-11-11
基于Bootstrap和JQuery實(shí)現(xiàn)動(dòng)態(tài)打開(kāi)和關(guān)閉tab頁(yè)的實(shí)例代碼
這篇文章主要介紹了基于Bootstrap和JQuery實(shí)現(xiàn)動(dòng)態(tài)打開(kāi)和關(guān)閉tab頁(yè)的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
jQuery選擇頭像并實(shí)時(shí)顯示的代碼，以前腳本之家用js實(shí)現(xiàn)了，這里使用jquery實(shí)現(xiàn)的。2010-06-06
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)異步上傳文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的列表，右上角有一個(gè)檢索功能我們要實(shí)現(xiàn)的是列表檢索功能，具體實(shí)例代碼大家參考下本文2017-07-07
jquery 動(dòng)態(tài)增加,減少input表單的簡(jiǎn)單方法(必看)
下面小編就為大家?guī)?lái)一篇jquery 動(dòng)態(tài)增加,減少input表單的簡(jiǎn)單方法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jQuery動(dòng)態(tài)生成表格及右鍵菜單功能示例
這篇文章主要介紹了jQuery動(dòng)態(tài)生成表格及右鍵菜單功能,結(jié)合實(shí)例形式分析了jQuery表格的動(dòng)態(tài)操作及鼠標(biāo)事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下2017-01-01
jquery實(shí)現(xiàn)全選和全不選功能效果的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)全選和全不選功能效果的實(shí)現(xiàn)代碼【推薦】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
JQuery中attr方法和removeAttr方法用法實(shí)例
這篇文章主要介紹了JQuery中attr方法和removeAttr方法用法,實(shí)例分析了jQuery中attr方法設(shè)置屬性與removeAttr方法移除屬性的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
jQuery在IE下使用未閉合的xml代碼創(chuàng)建元素時(shí)的Bug介紹
這個(gè)偏門(mén)Bug是我在更新phZoom 1.29后發(fā)現(xiàn)的, 我先將之重現(xiàn)一下2012-01-01