基于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 .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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
建立文件交换功能的脚本(二)
2006/10/09 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
vue实现文件上传功能
2018/08/13 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
python实现简易通讯录修改版
2018/03/13 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
详解pandas映射与数据转换
2021/01/22 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
自我鉴定范文
2013/11/10 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
教育合作协议范本
2014/10/17 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
大学生暑期实践报告
2015/07/13 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
Pandas-DataFrame知识点汇总
2022/03/16 Python