基于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的表格排序
Sep 11 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
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
优化使用mysql存储session的php代码
2008/01/10 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP递归创建多级目录
2015/11/05 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
Python时间的精准正则匹配方法分析
2017/08/17 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
django2.0扩展用户字段示例
2019/02/13 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
在django中自定义字段Field详解
2019/12/03 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
检举信的格式及范文
2014/04/04 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
春节晚会开场白
2015/05/29 职场文书