基于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 相关文章推荐
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 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二维数组分页2种实现方法解析
2020/07/09 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
在Python下进行UDP网络编程的教程
2015/04/29 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python:socket传输大文件示例
2017/01/18 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
windows下python和pip安装教程
2018/05/25 Python
Python列表list排列组合操作示例
2018/12/18 Python
基于python的Paxos算法实现
2019/07/03 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
基于python实现地址和经纬度转换
2020/05/19 Python
python和c语言哪个更适合初学者
2020/06/22 Python
Python如何读写CSV文件
2020/08/13 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
资产评估专业学生的自我鉴定
2013/11/14 职场文书
店长岗位职责
2013/11/21 职场文书
电工技术比武方案
2014/05/11 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
初中作文评语
2014/12/25 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
PHP设计模式(观察者模式)
2021/07/07 PHP
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS