初学选项卡，主要问题卡在了索引值上面，花了较长的时间学习。

索引值其实很好理解，就是为每一个元素用JS的方法添加一个属性，即自定义属性。

在for循环里的函数里用i，会直接弹出这个数组的length,而不是按照数组顺序走，这个原因我们会在学习作用域时学习到，现基于此问题，解决的方法就是为每一个元素添加一个自定义属性index，这个自定义属性一旦和数组匹配，就可以找到相应数组里的东西。

代码解释：aLi[i].index=i;    //为每一个Li添加一个自定义属性index等于i，也就是说每一个li身上都会有一个数字

　　　　　this.index;        //当前的数字，第几个。。可以这样理解

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{background:#000;}
#pic{width:400px;height:500px;position:relative;margin:0 auto; background:url(img/loader_ico.gif) no-repeat center;}
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666;list-style:none; }
#pic .active { background:#FC3; }
#pic p{bottom:0;}
#pic span{display:block;top:0;}
#pic p,#pic span{background:#FFF;width:391px;height:50px;opacity:0.3;filter:alpha(opacity=30); text-align:center;line-height:50px; font-weight:bold;position:absolute; }
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('pic');
var oImg=oDiv.getElementsByTagName('img')[0];
var oSpan=oDiv.getElementsByTagName('span')[0];
var oP=oDiv.getElementsByTagName('p')[0];
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arrUrl=['img/1.png','img/2.png','img/3.png','img/4.png'];
var arrText=['图片1','图片2','图片3','图片4'];
var num=0;

for(var i=0;i<arrUrl.length;i++){
oUl.innerHTML += '<li></li>';
};
//初始化
function tab(){
oImg.src=arrUrl[num];
oSpan.innerHTML=1+num+'/'+arrText.length;
oP.innerHTML=arrText[num];
for(var i=0;i<aLi.length;i++){
aLi[i].className='';
};
aLi[num].className = 'active';
};
tab();

for(var i=0;i<aLi.length;i++){
aLi[i].index=i; //索引值 给每一个li添加了自定义属性index为i，它的作用是一旦和其他数组相匹配，就可以找到相应数组里的东西
aLi[i].onclick=function(){
num=this.index;
tab();
};
};
};
</script>
</head>

<body>
<div id="pic">
<img src="" alt="" width="390" height="480" />
<span>图片数量正在加载中</span>
<p>图片说明正在加载中</p>
<ul>
</ul>
</div>
</body>
</html>

JS初学之-选项卡（图片切换类）的更多相关文章

  1. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  2. 原生js实现多组图片切换

    这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...

  3. 初学js之多组图片切换实例

    需求是以上效果展示.话不多说,直接代码显示,不涉及代码优化.已实现功能为目的. 先看html部分: <body> <div class="dream" id=&q ...

  4. js应用之实现图片切换效果

    数组的操作与应用 数组的定义 var 数组名=new Array(); //创建空数组 var 数组名=new Array(size);//创建指定数组长度的数组 var 数组名=new Array( ...

  5. JS案例练习：图片切换+切换模式

    先附图: CSS样式部分: <style> *{;} body{font-family:'Microsoft YaHei';} .menu{margin:20px auto 0; widt ...

  6. HTML+JS+DOM【选项卡自动切换】

    最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...

  7. JS实现简单的图片切换效果

    使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  8. js带缩略图的图片切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. phpstrom+xdebug+Xdebug helper 调试php

    第一步,php.ini打开xdebug扩展 xdebug.remote_enable=on ; 此地址为IDE所在IP xdebug.remote_host=127.0.0.1 xdebug.remo ...

  2. wp8.1 Study13：在WP8.1中分享文件和数据

    绪论:不同于windows, 在wp8.1中,如果不止一个程序可以接受其Uri或者文件,shell会提供一个界面让用户选择用哪个程序.而在windows中,用户可以在设置那里设置各种文件和Uri的默认 ...

  3. Program C 暴力求解

    Description   A ring is composed of n (even number) circles as shown in diagram. Put natural numbers ...

  4. Program B 暴力求解

    Given a sequence of integers S = {S1,S2,...,Sn}, you should determine what is the value of the maxim ...

  5. sizeof和strlen区别

    sizeof(...)是运算符,在头文件中typedef为unsigned int,其值在编译时即计算好了,参数可以是数组.指针.类型.对象.函数等 数组:编译时分配的空间大小 指针:指针所占的空间, ...

  6. （转）UIApplication sharedApplication详细解释-IOS

    iPhone应用程序是由主函数main启动,它负责调用UIApplicationMain函数,该函数的形式如下所示: int UIApplicationMain ( int argc, char *a ...

  7. Python学习路程day3

    set集合 ​set是一个无序且不重复的元素集合,访问速度快,天生解决重复问题 s1 = set() s1.add('luo')​ s2 = set (['luo','wu','wei','ling' ...

  8. leetcode 238 Product of Array Except Self

    这题看似简单,不过两个要求很有意思: 1.不准用除法:最开始我想到的做法是全部乘起来,一项项除,可是中间要是有个0,这做法死得很惨. 2.空间复杂度O(1):题目说明了返回的那个数组不算进复杂度分析里 ...

  9. 数据结构《13》----二叉树 Morris 前序遍历

    三种二叉树的后序遍历的方法: 1. 递归                      O(n) 时间复杂度, O(n) 空间复杂度 2. 迭代(用栈)       O(n) 时间复杂度, O(n) 空间 ...

  10. aspx页面图片用作html中img的url

    背景:如果无法直接访问保存图片的服务器,我们可以先制作一个aspx页面用来接受服务器发送过来的图片,然后html页面请求aspx页面.对图片服务器起一定的缓冲保护作用,预防对黑客攻击造成危害. 注意: ...