我利用网上代码开发的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);
我利用网上代码开发的JQuery图片插件的更多相关文章
- 我利用网上特效开发的Jquery插件
我利用网上特效开发的Jquery插件 代码如下 (function($){ $.fn.Dialogx = function(options) { var defaults={ Width:" ...
- 程序员利用javascript代码开发捕鱼游戏
面试这么成功,全靠这个捕鱼游戏来完成,看的就是里面javascript代码,所以说前端最重要的还是javascript这一关,不管是现在HTML5时代还是以后如何,javascript永远不会落后,大 ...
- [开发笔记]-flowplayer视频播放插件
最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. flowplayer也有html5版 ...
- jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)
前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于jQuery图片自适应排列显示代码
基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代 ...
随机推荐
- .NET (二)委托第二讲:内置委托Func
在上一章节中,我们自己声明了一个委托: public delegate bool Cal(int num); 接受int参数,返回bool类型,目的是过滤集合中的 奇数 或者 偶数. .NET 为我们 ...
- ZYNQ 的PS GEM DMA存在缺陷
使用iperf对zynq进行单socket tcp传输速率测试: 无网络损伤时,单向网络带宽约为600Mbps,双向网络带宽相加约400Mbps: 50ms延时,1ms抖动,无丢包时,单向网络带宽约为 ...
- windowsxp设置开机不需密码,但是锁定后打开需要密码
方法一: 1.先设置好密码2.设置不输入密码自动登陆系统 在cmd下运行rundll32 netplwiz.dll,UsersRunDll,在打开的窗口中,取消“要使用本机,用户必须输入用户名和密码” ...
- Ansible playbook API 开发 调用测试
Ansible是Agentless的轻量级批量配置管理工具,由于出现的比较晚(13年)基于Ansible进行开发的相关文档较少,因此,这里通过一些小的实验,结合现有资料以及源码,探索一下Ansible ...
- 回车与换行 ---编码等相关讨论----由notepad++ 批量替换 引发的讨论,转义字符也是人为硬性规定的。
,
- python基础知识---数据结构之间的转换
- 《CoffeeScript应用开发》学习: 第四章-改进应用程序
检查值是否存在 使用存在运算符 CoffeeScript中有一个非常有用的存在运算符?,它能正确地处理值是否存在(存在的意思为变量不为undefined或者null)的情况.在变量后添加?来判断它是否 ...
- HDOJ(1238) KMP
Substrings http://acm.hdu.edu.cn/showproblem.php?pid=1238 先找到长度最短的字符串,把它的子串和该子串的逆序(按长度从大到小)依次与其他字符串匹 ...
- 如何理解JS回调函数
1.回调函数英文解释: A callback is a function that is passed as an argument to another function and is execut ...
- leetcode 4. Median of Two Sorted Arrays
https://leetcode.com/problems/median-of-two-sorted-arrays/ There are two sorted arrays nums1 and num ...