基于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 EasyUI API 中文文档 搜索框
Sep 29 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
JS实现简易图片自动轮播
Oct 16 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计算排列组合的方法
2013/11/13 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
php中return的用法实例分析
2015/02/28 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
Python实现统计单词出现的个数
2015/05/28 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
python做反被爬保护的方法
2019/07/01 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
电大自我鉴定范文
2013/10/01 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP