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

索引值其实很好理解，就是为每一个元素用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. Windows下为64位的python3.4.3安装numpy

    貌似现在没有python3.x的numpy 64位.exe安装包只有.whl的(也可能是我没找到)只能在终端下安装 1.到官网https://www.python.org/downloads/下载py ...

  2. CRF++使用小结

    1. 简述 最近要应用CRF模型,进行序列识别.选用了CRF++工具包,具体来说是在VS2008的C#环境下,使用CRF++的windows版本.本文总结一下了解到的和CRF++工具包相关的信息. 参 ...

  3. 图书馆管理系统SRS

    1．任务概述 1.1目标 主要提供图书信息和读者基本信息的维护以及借阅等功能.本系统是提高图书管理工作的效率,减少相关人员的工作量,使学校的图书管理工作真正做到科学.合理的规划,系统.高效的实施. 1 ...

  4. AngularJS结构简介

    AngularJS是MVC架构,M是C里面的属性-值,C是js的class,V是DOM 各个关键特性的结构如下图所示: http://my.oschina.net/tommyfok/blog/2970 ...

  5. 记一个有想法却没能力实现的硬件产品——mp3校时闹钟

    枕头旁的闹钟,我想大家都用过,很便宜.用一节干电池供电.但其最大的缺点就是不太准,不能校时. 电池啥事用光,也不知道.钟是走的很慢,没按时闹,搞的自己迟了到. 于是就有了我的漫长思考过程... 先说手 ...

  6. C/C++遍历Windows文件夹下的所有文件

    因为文件夹中往往包含文件和文件夹.想要遍历所有的文件,必须遍历文件夹中所有的文件夹.很显然,这个描述满足递归的两个要素:(1)问题的规模在不断的缩小,且新问题的模式与旧问题相同.很显然文件夹中含有子文 ...

  7. SharePoint 2013 开发——开发并部署第一个APP

    博客地址:http://blog.csdn.net/FoxDave 本篇我们开始对开发APP应用程序进行了解. 本篇基于本地SharePoint环境(如果是Office 365的话会方便许多),需 ...

  8. Tomcat 网站部署（三）

    一.Tomcat的部署方式有以下两种 1.自动部署 2.虚拟目录 二.自动部署 文件必须放在放在webapps就可以了,可以用这样访问 http://localhost:8080/放在webapps目 ...

  9. 微软TechEd2013大会门票热卖！

    微软TechEd2013大会将在北京.上海两地隆重举行! 会议时间安排如下: 北京:12月5日—6日  国家会议中心 上海:12月11日—12日  国际会议中心 现在是门票热卖时期,票价:2688.0 ...

  10. 一个基于atomic的卖票测试

    package testAtomic; import java.util.concurrent.atomic.AtomicInteger; import sun.security.krb5.inter ...