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

索引值其实很好理解，就是为每一个元素用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. 基于K2 BPM的大型连锁企业开关店选址管理解决方案

    业内有句名言:“门店最重要的是什么?第一是选址,第二是选址,第三还是选址” 选址是一个很复杂的综合性商业决策过程,需要定性考虑和定向分析.K2开关店&选址管理方案重点关注:如何开出更好的店?在 ...

  2. 2799元的HTC One时尚版要卖疯了

    俗话说“好人有好报”,这句话同样可以应用到手机上.本月初,HTC正式公布了HTC One时尚版的售价,裸机2799元,礼包价2999元(配智能立显保护套).该价格一出,立刻引来一片哗然.因为大家都不相 ...

  3. Geetest 极验验证 验证图片拼图

    今天要求做一个跟魅族官网登陆的一个验证效果一样的界面 是一个拖动滑动图片进行拼图 那个效果看着很好,刚开始拿到不知道好不好做 从网上搜资料发现这是一种“极验验证码” 让用户通过滑动拼图来进行验证. 网 ...

  4. PAT 08-2 求矩阵的局部最大值

    这题挺简单的,但,每日一篇.说两点:第一,我的粗心导致我这题花了大把的时间去找错误,看到4个测试用例对了三个,我以为是那块的边界条件没考虑到,又或者是存在隐蔽的逻辑或语法错误,通过与别人程序的反复对比 ...

  5. mp3文件 ID3v2 帧标识的含义

    mp3文件 ID3v2 帧标识的含义 Declared ID3v2 frames The following frames are declared in this draft. 4.20 AENC ...

  6. (转)如何在Windows上安装多个MySQL

    原文:http://www.blogjava.net/hongjunli/archive/2009/03/01/257216.html 如何在Windows上安装多个MySQL 本文以免安装版的mys ...

  7. SVG 2D入门7 - 重用与引用

    前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用. 组合 - g元素      g元素是一种容器,它组合一组 ...

  8. 如何从SAP中查找BADI

    如何从SAP中查找BADI   如何从SAP中查找BADI http://blog.csdn.net/CompassButton/article/details/1231652 BADI作为SAP的第 ...

  9. BI--SDN上收集到的SAP BI的极好文章的链接

    1)Overviewhttps://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/60981d00-ca87-2910-fdb ...

  10. 在国内时，更新ADT时需要配置的

    RT