基于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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
谈一谈javascript闭包
Jan 28 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
react组件基本用法示例小结
Apr 27 Javascript
Vue中添加滚动事件设置的方法详解
Sep 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
德劲1107的电路分析与打磨
2021/03/02 无线电
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Python中使用Inotify监控文件实例
2015/02/14 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
七一表彰活动方案
2014/01/18 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
秋天的怀念教学反思
2014/04/28 职场文书