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

索引值其实很好理解，就是为每一个元素用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 记录

    为什么调用 sqrt 函数报错显示未定义 一.调用此函数时,要先引用头文件:#include <math.h>二.linux gcc 编译时,如果用到了 math中的函数,要手工加入函数库 ...

  2. sql 行专列 列转行 普通行列转换

    转载:http://www.cnblogs.com/newwind521/archive/2010/11/25/1887203.html sql 行专列 列转行 普通行列转换 /* 标题:普通行列转换 ...

  3. CSS基本特性

    1.块状元素有大小:行内元素没有,除非脱离文档流(如float.absolute) 2.内部元素决定大小 不管外面元素是哪种类别(块状或行内),里面元素都可以撑大外面 3.外部元素决定位置

  4. JNI与NDK简介

    最近稍微了解一下JNI和NDK. 网上各种教程给人一种二者不分的感觉, 经过自己运行代码, 将两者的关系理了一下. 就目前了解,JNI应该是java自带的一种调用c和c++等语言(native cod ...

  5. xlistview的java（脚）

    package com.bwie.xlistviews; import com.bwie.test.R; import android.content.Context;import android.u ...

  6. swing Event-Listener-Adapter 对照表

    Source Event Event Listener AbstractButton (JButton,JToggleButton, JCheckBox,JRadioButton ActionEven ...

  7. OpenCV之响应鼠标（四）：在图像上绘制出矩形并标出起点的坐标

    涉及到两方面的内容:1. 用鼠标画出矩形.2.在图像上绘制出点的坐标 用鼠标绘制矩形,涉及到鼠标的操作,opencv中有鼠标事件的介绍.需要用到两个函数:回调函数CvMouseCallback和注册回 ...

  8. myEclipse下安装SVN插件

    step1.首先下载svn插件, step2.将下载下来的插件解压缩任意目录,找到里面的features 和plugins两个文件夹, step3.在myEclipse的安装目录下找到dropins文 ...

  9. jvm之xms、xmx等参数分析

    注:本文摘自http://www.cnblogs.com/mingforyou/archive/2012/03/03/2378143.html ,感谢原作者 1.参数的含义-vmargs -Xms12 ...

  10. (转)Sqlite中INTEGER PRIMARY KEY AUTOINCREMENT和rowid的使用

    原文:http://www.cnblogs.com/peida/archive/2008/11/29/1343832.html Sqlite中INTEGER PRIMARY KEY AUTOINCRE ...