选项卡切换:自动定时&主动触发事件
最初学习的是手动触发事件,添加的是onmouseover,其中index是关键,tab标签与现实内容的div索引一一对应,遍历tab标签,当鼠标移动到某标签时,触发对应的内容div显示。
for(var i=0;i<img.length;i++){
img[i].index=i;
img[i].onmouseover=function(){
for(var i=0;i<img.length;i++){
img[i].className="";
content_div[i].className="content_div";
};
this.className="active";
content_div[this.index].className="content_div_active";
};
} 但是在需要添加定时器时,无函数可调用,基本思路应该是,编辑一个根据tab标签而切换内容的函数,调用分别为两处:onmouseover和setInterval中。上面代码写在遍历for循环里面,执行函数与i相关联,
如果单独抽出,其中变动的数字不知如何表达,网上查阅答案,发现可以使用传参的方式(好像在学习的初期,不太习惯使用函数传参,但是这样貌似能更加容易的解决问题) var img=document.getElementsByTagName("img");
var content_div=document.getElementsByClassName("content")[0].getElementsByTagName("div");
var index=0; for (var i = 0; i< img.length; i++)
{
img[i].index=i;
img[i].onmouseover=function()
{
autoChange(this); //点击到哪一个img,函数就对那个img执行。
};
}; function autoChange(obj){
if(!obj){ //obj为undefined,!obj为true。
obj = img[index]; //初始index为0;所以定时器由img[0]开始执行
if(index>=img.length-1) { //当index>=3,即循环到最后一个img时---->>>index=0,开始循环到第一个img
index = 0;
}else {
index++;
}
}
for (var i = 0; i< img.length; i++)
{
img[i].className="";
content_div[i].className="content_div";
};
obj.className="active";
content_div[obj.index].className="content_div_active";
} setInterval(autoChange,1000); //autoChange不带括号写入,表示将整个函数的方法写入,其中obj不传参。
选项卡切换:自动定时&主动触发事件的更多相关文章
- 主动触发事件 自定义事件 trigger 及其用法
1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...
- js jq 主动触发事件
js的自定义事件与触发 //主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = docume ...
- JQuery 自己主动触发事件
经常使用模拟 有时候,须要通过模拟用户操作,来达到单击的效果.比如在用户进入页面后,就触发click事件,而不须要用户去主动单击. 在JQuery中.能够使用trigger()方法完毕模拟操作.比如能 ...
- jQuery-1.9.1源码分析系列(十) 事件系统——主动触发事件和模拟冒泡处理
发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ...
- js简单自定义事件与主动触发事件
var events = { addHandler: function (element, eventType, handler) { if (element.addEventListener) { ...
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- js和jquery中的触发事件
改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...
- c# TabControl控件中TabPage选项卡切换时触发的事件
选项卡切换触发的是tabcontrol控件的SelectedIndexChanged事件. 当tabcontrol控件的任何一个tabpage被点击或选择,即发生SelectedIndexChange ...
- JQuery 自动触发事件
JQuery 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操 ...
随机推荐
- ios打包出来为pkg的处理方法
Add LSRequiresIPhoneOS YES to your Info.plist The key can be found as Application requires iPhone en ...
- Visual studio 类视图和资源视图不显示的问题
关于Visual studio 类视图和资源视图不显示的问题 解决方法: 1. 工具—选项—文本编辑器—C/C++—高级,浏览/导航下的禁用数据库选项置为False; 2. 输入命令:devenv / ...
- Elasticsearch mysql 增量同步
主要用到了一个JDBC importer for Elasticsearch的库. 想要增量同步,有一些先决条件.首先数据库中要维护一个update_time的时间戳,这个字段表示了该记录的最后更新时 ...
- Access forbidden! You don't have permission to access the requested object. It is either read-protected or not readable by the server
好久不没弄 apache和php了,突然遇到这种奇葩的问题,本来想直接在网上找现成的解决思路,结果网上搜索花了不少功夫,也没找到原因. 后来看日志文件:apache\logs\error.log发现了 ...
- The server encountered an internal error that prevented it from fulfilling this request.
type Exception report message Request processing failed; nested exception is org.mybatis.spring.MyBa ...
- 设置树莓派3 B+的静态IP
修改/etc/dhcpcd.conf 文件 sudo vim /etc/dhcpcd.conf interface eth0 static ip_address= static routers=192 ...
- JVM实用参数(六) 吞吐量收集器
在实践中我们发现对于大多数的应用领域,评估一个垃圾收集(GC)算法如何根据如下两个标准: 吞吐量越高算法越好 暂停时间越短算法越好 首先让我们来明确垃圾收集(GC)中的两个术语:吞吐量(through ...
- Linux shell相关
1 一些常见的问题及解决方法 <1> ssh登录不显示用户名跟路径 可能原因: ssh登录的用户没有配置shell 对应解决方案:在/etc/passwd文件对应用户那一行末尾添加/bin ...
- Eclipse点击工程结构里任意文件或文件夹变拖动(或复制)的bug
本文为原创文章,欢迎转载,但请注明出处http://www.cnblogs.com/yexiubiao/p/5204601.html,未在文章页面明显位置给出原文连接的,将保留追究法律责任的权利. 在 ...
- 虚拟机中CentOS 7下PHP环境配置
为了简单起见,虚拟机网卡设置为桥接模式 1.yum install httpd php 2.yum install mariadb 3.启动mariadb systemctl start maria ...