基于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 相关文章推荐
accesskey 提交
Jun 26 Javascript
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
Vue.js组件使用props传递数据的方法
Oct 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
怎么使 Mysql 数据同步
2006/10/09 PHP
用PHP读取IMAP邮件
2006/10/09 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
Smarty模板语法详解
2019/07/20 PHP
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
python使用Matplotlib绘制分段函数
2018/09/25 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
大学新生欢迎词
2014/01/10 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
可可西里观后感
2015/06/08 职场文书
格林童话读书笔记
2015/06/30 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
vue router 动态路由清除方式
2022/05/25 Vue.js