基于jQuery实现的幻灯图片切换


Posted in Javascript onDecember 02, 2016

话不多说,直接附上源码,仅供大家参考

// 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

demo下载地址:http://xiazai.3water.com/yuanma/myPPT(3water.com).rar

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
JavaScript中清空数组的方法总结
Dec 02 #Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 #Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 #Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 #Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 #Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 #Javascript
jQuery联动日历的实例解析
Dec 02 #Javascript
You might like
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python实现堆排序的方法详解
2016/05/03 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
大学生在校表现评语
2014/12/31 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
JS函数式编程实现XDM一
2022/06/16 Javascript