基于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 中关于CSS操作部分使用说明
Jun 10 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 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操作文件方法问答
2007/03/16 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP实现的json类实例
2015/07/28 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
AngularJS动态菜单操作指令
2017/04/25 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Python字符串及文本模式方法详解
2020/09/10 Python
python 制作简单的音乐播放器
2020/11/25 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
酒店执行总经理岗位职责
2013/12/15 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
党校培训学习心得体会
2016/01/06 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
Go中的条件语句Switch示例详解
2021/08/23 Golang