最初学习的是手动触发事件,添加的是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不传参。

选项卡切换:自动定时&主动触发事件的更多相关文章

  1. 主动触发事件 自定义事件 trigger 及其用法

    1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...

  2. js jq 主动触发事件

    js的自定义事件与触发 //主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = docume ...

  3. JQuery 自己主动触发事件

    经常使用模拟 有时候,须要通过模拟用户操作,来达到单击的效果.比如在用户进入页面后,就触发click事件,而不须要用户去主动单击. 在JQuery中.能够使用trigger()方法完毕模拟操作.比如能 ...

  4. jQuery-1.9.1源码分析系列(十) 事件系统——主动触发事件和模拟冒泡处理

    发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ...

  5. js简单自定义事件与主动触发事件

    var events = { addHandler: function (element, eventType, handler) { if (element.addEventListener) { ...

  6. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

  7. js和jquery中的触发事件

    改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...

  8. c# TabControl控件中TabPage选项卡切换时触发的事件

    选项卡切换触发的是tabcontrol控件的SelectedIndexChanged事件. 当tabcontrol控件的任何一个tabpage被点击或选择,即发生SelectedIndexChange ...

  9. JQuery 自动触发事件

    JQuery 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操 ...

随机推荐

  1. bzoj1553: XOR网络

    Description   计算给定范围内有多少种输入可以使输出为1. 我们假设3 < n < 100, 3 < m < 3000,而且网络中的门是用1到m之间的数任意编号的. ...

  2. Building GCC 4.1.2 in CentOS 7 for Maya API development

    Following the official guid: http://help.autodesk.com/cloudhelp/2015/ENU/Maya-SDK/files/Setting_up_y ...

  3. Hash校验

    在项目的建设方案中,都会提到数据的安全性,数据的安全性其中又包括数据的完整性和数据保密性,      1.  数据完整性 通过使用Hash校验的方法确保数据的完整性: 传输过程的完整性受到损坏则采取数 ...

  4. 【学】jQuery的源码思路1——后代选择器

    jQuery的源码思路1--后代选择器 这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: # ...

  5. Java与C++程序在编译和运行上的区别

    Java.C++都属于高级语言,而计算机能认识执行的只是机器码(即二进制),所以高级语言都必须经过直接或间接的转换成汇编以后,才能运行: 对于C/C++这类高级计算机语言,它们的编译器(例如Unix下 ...

  6. mongodb配置文件

    启动MongoDB有2种方式,一是直接指定配置参数,二是指定配置文件.这里先介绍配置文件,启动方式如下: 1.mongod --config /etc/mongodb.conf 配置如下: verbo ...

  7. 关于NGINX的502的装逼打怪之路

    写日志之前先copy一段nginx502的原因,从某网看到如下,然而这并不是重点,最重要还是看博主手敲的东西. 一.NGINX 502错误排查 NGINX 502 Bad Gateway错误是Fast ...

  8. TensorFlow中与卷积核有关的各参数的意义

    以自带models中mnist的convolutional.py为例: 1.filter要与输入数据类型相同(float32或float64),四个参数为`[filter_height, filter ...

  9. c++ 一些随笔

    1. A region of source code where any use of the unqualified name (that is, as a plain identifier) re ...

  10. AS快捷键

    Ctrl+Q 显示关键字的提示文档 Ctrl+鼠标点击 查看关键字的源码 ctrl+T 在不同的选项卡中进行切换 ctrl+J 提示当前位置输入模板 Ctrl+P 提示参数 Alt+Enter 提示 ...