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

索引值其实很好理解，就是为每一个元素用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. ROS语音识别

    一.语音识别包 1.安装         安装很简单,直接使用ubuntu命令即可,首先安装依赖库: $ sudo apt-get install gstreamer0.10-pocketsphinx ...

  2. iOS解决两个静态库的冲突 duplicate symbol

    http://blog.163.com/023_dns/blog/static/118727366201391544630380/ 场景: 解决TencentOpenAPI.framework与Zba ...

  3. Android Phonebook编写联系人UI加载及联系人保存流程（一）

    2014-01-06 17:05:11 将百度空间里的东西移过来. 本文适合ROM定制做Phonebook的童鞋看,其他人飘过即可- Phonebook添加/编辑联系人UI加载及保存联系人流程,是一系 ...

  4. Hibernate中的一对一映射

    1.需求 用户和身份证是一一对应的关系. 有两种对应方式: 用户id作为身份证表的外键,身份证号作为主键: 用户id作为身份证表的主键: 2.实体Bean设计 User: public class U ...

  5. hihocoder 1236(2015北京网络赛 J题) 分块bitset乱搞题

    题目大意: 每个人有五门课成绩,初始给定一部分学生的成绩,然后每次询问给出一个学生的成绩,希望知道在给定的一堆学生的成绩比这个学生每门都低或者相等的人数 因为强行要求在线查询,所以题目要求,每次当前给 ...

  6. 解决使用OCI连接oracle LNK2019: 无法解析的外部符号的问题

    据我所知,在使用OCI连接Oracle时出现LNK2019: 无法解析的外部符号问题的情况有两种: 一.没有引入附加依赖项,右键项目->属性->配置属性->链接器->输入中添加 ...

  7. ASP.NET MVC4 & Entity Framework 6.0 IIS 部署出错解决方案

    博客地址 http://blog.csdn.net/foxdave 近期了解MVC4的时候弄了一个简单的小工程,使用Entity Framework作为Model,F5启动调试运行的时候没有问题,但是 ...

  8. history对象

    1.history对象前进 history.forward() 2.history对象后退 history.back() 3.history对象跳入指定页面 history.go(-1):  //当前 ...

  9. 获取一个 app 的 URL Scheme 的方法：

    获取一个 app 的 URL Scheme 的方法: 上这个网站 URL Schemes 查一下相应的 app 的 URL Scheme 是否有被收录 第一种方法没找到的话,把相应的 app 的 ip ...

  10. 技术分享：逆向分析ATM分离器

    文章内容仅供技术交流,请勿模仿操作! 背景(作者) 每一次外出时, Elizabeth和我总是格外的小心,同时把我们身上的钱藏在特殊的皮带上面,这样还不够,我们还采取了“狡兔三窟”的方式来藏身上带的银 ...