基于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 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
Node.js文件操作详解
Aug 16 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
node 标准输入流和输出流代码实例
Sep 19 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
长波有什么东西
2021/03/01 无线电
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
项目实践之javascript技巧
2007/12/06 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python time模块用法实例详解
2014/09/11 Python
python中的字典操作及字典函数
2018/01/03 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python字典一键多值实例代码分享
2019/06/14 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
酒后驾驶检讨书
2014/01/27 职场文书
科研先进个人典型材料
2014/01/31 职场文书
个人简历自我评价
2014/02/02 职场文书
情况说明书格式范文
2014/05/06 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
员工安全责任协议书
2016/03/22 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android
如何利用python实现Simhash算法
2022/06/28 Python