基于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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 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
根德YB400的电路分析
2021/03/02 无线电
用PHP发电子邮件
2006/10/09 PHP
优化PHP代码的53条建议
2008/03/27 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
jQuery动态添加
2016/04/07 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
python写入已存在的excel数据实例
2018/05/03 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
工地门卫岗位职责
2013/12/30 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
毕业生政审意见范文
2015/06/04 职场文书
创业计划书之宠物店
2019/09/19 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js