我利用网上代码开发的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);

  

我利用网上代码开发的JQuery图片插件的更多相关文章

  1. 我利用网上特效开发的Jquery插件

    我利用网上特效开发的Jquery插件 代码如下 (function($){ $.fn.Dialogx = function(options) { var defaults={ Width:" ...

  2. 程序员利用javascript代码开发捕鱼游戏

    面试这么成功,全靠这个捕鱼游戏来完成,看的就是里面javascript代码,所以说前端最重要的还是javascript这一关,不管是现在HTML5时代还是以后如何,javascript永远不会落后,大 ...

  3. [开发笔记]-flowplayer视频播放插件

    最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. flowplayer也有html5版 ...

  4. jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  5. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  7. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 基于jQuery图片自适应排列显示代码

    基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

随机推荐

  1. .NET (二)委托第二讲:内置委托Func

    在上一章节中,我们自己声明了一个委托: public delegate bool Cal(int num); 接受int参数,返回bool类型,目的是过滤集合中的 奇数 或者 偶数. .NET 为我们 ...

  2. ZYNQ 的PS GEM DMA存在缺陷

    使用iperf对zynq进行单socket tcp传输速率测试: 无网络损伤时,单向网络带宽约为600Mbps,双向网络带宽相加约400Mbps: 50ms延时,1ms抖动,无丢包时,单向网络带宽约为 ...

  3. windowsxp设置开机不需密码,但是锁定后打开需要密码

    方法一: 1.先设置好密码2.设置不输入密码自动登陆系统 在cmd下运行rundll32 netplwiz.dll,UsersRunDll,在打开的窗口中,取消“要使用本机,用户必须输入用户名和密码” ...

  4. Ansible playbook API 开发 调用测试

    Ansible是Agentless的轻量级批量配置管理工具,由于出现的比较晚(13年)基于Ansible进行开发的相关文档较少,因此,这里通过一些小的实验,结合现有资料以及源码,探索一下Ansible ...

  5. 回车与换行 ---编码等相关讨论----由notepad++ 批量替换 引发的讨论,转义字符也是人为硬性规定的。

    ,

  6. python基础知识---数据结构之间的转换

  7. 《CoffeeScript应用开发》学习: 第四章-改进应用程序

    检查值是否存在 使用存在运算符 CoffeeScript中有一个非常有用的存在运算符?,它能正确地处理值是否存在(存在的意思为变量不为undefined或者null)的情况.在变量后添加?来判断它是否 ...

  8. HDOJ(1238) KMP

    Substrings http://acm.hdu.edu.cn/showproblem.php?pid=1238 先找到长度最短的字符串,把它的子串和该子串的逆序(按长度从大到小)依次与其他字符串匹 ...

  9. 如何理解JS回调函数

    1.回调函数英文解释: A callback is a function that is passed as an argument to another function and is execut ...

  10. leetcode 4. Median of Two Sorted Arrays

    https://leetcode.com/problems/median-of-two-sorted-arrays/ There are two sorted arrays nums1 and num ...