博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery-插件-图片切换(第一次自已偿试写插件)
阅读量:6069 次
发布时间:2019-06-20

本文共 1676 字,大约阅读时间需要 5 分钟。

 

// JavaScript Document;(function($){    $.fn.extend({        "zj_ppt":function(value){                        //默认参数定义            var $this = $(this);            value = $.extend({                "time":2000,        //间隔变化动画时间                "con":0,                "sto":true,                "count":"count",    //切换小图的父级class名字                "src":"src",        //切换小图片路径                "src_cur":"src_cur"    //当前切换小图片路径                },value);                        //图片切换函数            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;                }            }                        //每间隔多少时间执行一次图片切换            function sett(){                if(value.sto){autopic()};                setTimeout(sett,value.time);            }                        //鼠标悬停时切换图片,并停止自动切换            $(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();                            //反回原对像,以便连缀JQuery的其它方法            return $this;        }    });})(jQuery);

以上是插件部分代码;

下面可以下载demo

 

 

转载地址:http://bzfgx.baihongyu.com/

你可能感兴趣的文章
C#匹配中文字符串的4种正则表达式分享
查看>>
转:android git开源项目列表
查看>>
LINUX 中的 TCP/IP协议 参数详解
查看>>
String 与StringBuffer的区别与使用
查看>>
nginx-upload-module模块实现文件断点续传
查看>>
Android studio动态调试smali
查看>>
mount
查看>>
如何为Linux安装Go语言
查看>>
server r2 系统更新文件清理
查看>>
WINFORM写入COOKIE
查看>>
Eclipse在线集成maven M2eclipse插件
查看>>
Jmeter 专题
查看>>
imx6 uboot logo 更改
查看>>
Xen虚拟机克隆实战
查看>>
循序渐进,了解Hive是什么!
查看>>
Codeforces Round #369 (Div. 2) C. Coloring Trees 动态规划
查看>>
ActiveMQ笔记(7):如何清理无效的延时消息?
查看>>
Linux系统文件访问控制列表
查看>>
js私有共有成员
查看>>
Linux 下 Shell 命令的分类及用法
查看>>