我利用网上代码开发的JQuery图片插件

我利用网上代码开发的JQuery图片插件

我利用网上代码开发的JQuery图片插件

代码如下

(function($){
$.fn.FocusPic = function(options){ var defaults = {
intervalTime:1000,//切换时间
divElement:".FocusPic",//div元素
imgElement:".imgList",//图片元素
numElement:".countNum",//数字索引按钮元素
titleElement:".titleList",//标题文字元素
currentClass:"current"//当前数字样式
} var options = $.extend(defaults, options); var imgEle = options.divElement+" " + options.imgElement;
var numEle = options.divElement+" " + options.numElement;
var titleEle = options.divElement+" " + options.titleElement;
var count = $(imgEle+">li").length;
var index=0; /* 如果按钮元素不存在则添加按钮元素 */
if($(numEle).length==0)
{
createElement(options.numElement);
}
for(var i=0;i<count;i++)
{
$(numEle).append("<li>"+(i+1)+"</li>");
} /* 如果标题元素不存在则添加元素 */
if($(titleEle).length==0)
{
createElement(options.titleElement);
}
for(var i=0;i<count;i++)
{
var a = $($(imgEle+" li")[i]).find("a");
if(a.length>0)
{
var link = "<a target='_blank' href='"+$(a).attr("href")+"' >"+ $(a).attr("title")+"</a>";
$(titleEle).append("<li>"+link+"</li>");
}
else
{
$(titleEle).append("<li> </li>");
}
} /* 开始时显示第一个图片 */
//$($(imgEle+" li")[index]).css("display","list-item");
//$($(imgEle+" li")[index]).fadeIn(100);
$($(imgEle+" li")[index]).show();
$($(numEle+" li")[index]).addClass(options.currentClass);
$($(titleEle+" li")[index]).show();
index++; $(numEle+" li").click(function(){
var ind = $(numEle+" li").index($(this));
index =ind;
imgShow(ind);
}); var playing = setInterval(autoShow,options.intervalTime); $(options.divElement).mouseover(function()
{
clearInterval(playing);
}); $(options.divElement).mouseout(function()
{
playing = setInterval(autoShow,options.intervalTime);
}); function createElement(e)
{
if( e.substring(0,1)=='.')
$(options.divElement).append("<ul class='"+ e.replace('.','') +"'></ul");
else if( e.substring(0,1)=='#')
$(options.divElement).append("<ul id='"+ e.replace('.','#') +"'></ul");
else
$(options.divElement).append("<ul class='"+ e +"'></ul");
}
function autoShow()
{
imgShow(index);
index++;
if(index>=count) index=0;
}
/* 显示第ind个图片 */
function imgShow(ind)
{
$(imgEle+" li").fadeOut(1000);
$($(imgEle+" li")[ind]).fadeIn(1000); $(numEle+" li").removeClass(options.currentClass);
$($(numEle+" li")[ind]).addClass(options.currentClass); $(titleEle+" li").hide();
$($(titleEle+" li")[ind]).show();
}
}; })(jQuery);

  

上一篇:2015腾讯web前端笔试题


下一篇:杂记:腾讯暑期实习 Web 后端开发面试经历