基于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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
javascript常用方法汇总
2014/12/02 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
使用python编写监听端
2018/04/12 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
基于PyTorch中view的用法说明
2021/03/03 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
活动总结范文
2014/08/30 职场文书
房产电话营销开场白
2015/05/29 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server