基于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 相关文章推荐
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
layui select获取自定义属性方法
Aug 15 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中使用反射技术的架构插件使用说明
2010/05/18 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
js history对象简单实现返回和前进
2013/10/30 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
自己使用总结Python程序代码片段
2015/06/02 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python最小二乘法矩阵
2019/01/02 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
python性能测试工具locust的使用
2020/12/28 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
学生自我鉴定模板
2013/12/30 职场文书
生产部岗位职责范文
2014/02/07 职场文书
安全演讲稿大全
2014/05/09 职场文书
学校献爱心活动总结
2014/07/08 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
工地食品安全责任书
2015/05/09 职场文书