基于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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
php curl_init函数用法
2014/01/31 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
2011/04/28 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
python实现C4.5决策树算法
2018/08/29 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python里glob模块知识点总结
2021/01/05 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
华三通信H3C面试题
2015/05/15 面试题
双创工作实施方案
2014/03/26 职场文书
文体活动实施方案
2014/03/27 职场文书
关于安全的标语
2014/06/10 职场文书
青奥会口号
2014/06/12 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
房屋买卖定金协议书
2016/03/21 职场文书