基于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清空file文件域的解决方案
Apr 12 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
原生js实现简单的焦点图效果实例
Dec 14 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实现一个简单的用户登记表示例
2017/04/25 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
js 函数调用模式小结
2011/12/26 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python正则表达式和元字符详解
2018/11/29 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python序列化与数据持久化实例详解
2019/12/20 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
Linux文件系统类型
2012/09/16 面试题
社区庆八一活动方案
2014/02/02 职场文书
标准版离职证明书
2014/09/12 职场文书
免职通知
2015/04/23 职场文书
让子弹飞观后感
2015/06/11 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server