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

索引值其实很好理解，就是为每一个元素用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. C# DES加密

    需要引用名称空间 using System; using System.Text; using System.Security.Cryptography; using System.IO; 具体代码: ...

  2. 使用rosed编辑ROS文件

    1.1使用rosed. rosed是rosbash套件的一部分．它可以使你通过package的名字直接编辑一个package中的文件而不用输入package的整个路径． 用法: $ rosed [pa ...

  3. iframe中的jquery ui modal dialog 覆盖父窗口

    在iframe中 使用jquery ui dialog,弹出后可以覆盖父窗体 ///iframe中的jquery ui modal dialog 覆盖父窗口 function openDialog() ...

  4. Oracle Data Integrator 12c (12.1.2)新特性

    改进特性如下: 基于流程界面的声明式设计 在12c中,以前的接口(interface)已经改为映射(mapping),新的基于流程声明的设计方式更灵活,也更容易使用.在12c中,映射的实现是通过使用J ...

  5. AS启动模拟器报'mksdcard.exe' is missing from the SDK tools folder.异常、启动模拟器失败

    这个问题是因为SDK下的tools文件夹中找不到mksdcard.exe程序所以无法启动模拟器,下载android-sdk_r20-windows.zip压缩包解压缩后将tools文件覆盖到SDK的t ...

  6. php中常用的运算符

    运算符 运算符是告诉PHP做相关运算的标识符号. PHP运算符一般分为算术运算符.赋值运算符.比较运算符.三元运算符.逻辑运算符.字符串连接运算符.错误控制运算符. 1.变量名记得加“$” 符: 2. ...

  7. 2013年8月份第2周51Aspx源码发布详情

    上班族网站(毕设)源码  2013-8-16 [VS2010]源码描述:自己做的毕业设计,上班族网站项目是专门针对上班族群体设计和开发的网站项目.该网站主要涵盖了论坛平台,笑话模块,名言模块,资讯模块 ...

  8. 《Java7中 下划线的新特性》

    //Java7引入了一个新功能:程序员可以在数值中使用下画线,不管是 //整形数值,还是浮点型数值,都可以自由地使用下划线.通过下划线 //分隔,可以更直观的分辨数值中到底有多少位. public c ...

  9. RTL2832U+R820电视棒跟踪飞机轨迹教程(ADS-B)

    Ubuntu 14.04.3 amd64 apt-get install git apt--dev 安装rtl-sdr git clone git://git.osmocom.org/rtl-sdr. ...

  10. 树莓派安装kali后的简单配置

    树莓派可以说是极客的最爱,可以根据不同的需求去做定制. 前文<使用树莓派和kali Linux打造便携式渗透套件>讲了一些使用树莓派的基础,主要侧重于将树莓派当作一个物理后门使用.我则更喜 ...