索引值应用

最新推荐文章于 2024-07-10 09:36:40 发布

kaka_hikun

最新推荐文章于 2024-07-10 09:36:40 发布

阅读量414

点赞数

分类专栏： js学习

本文链接：https://blog.csdn.net/weixin_48235555/article/details/107069630

版权

js学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

添加索引值

1、index索引值

2、索引值运用：图片切换实例

思路一：全部清除

思路二：消除上一个

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
#pic { width:400px; height:500px; position:relative; margin:0 auto;
    background:url(img/loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px;
    line-height:30px; text-align:center; color:#fff; background:#000; }
</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 = [ '图片一', '图片二', '图片三', '图片四' ];
   var num = 0;
    var oldLi = null;
   
   for( var i=0; i<arrUrl.length; i++ ){
      oUl.innerHTML += '<li></li>';
   }
    oldLi = aLi[num];
   
   // 初始化
   oImg.src = arrUrl[num];
   oSpan.innerHTML = 1+num+' / '+arrUrl.length;
   oP.innerHTML = arrText[num];
   aLi[num].className = 'active';
   
   for( var i=0; i<aLi.length; i++ ){
      aLi[i].index = i;        // 索引值
      aLi[i].onclick = function (){
         oImg.src = arrUrl[ this.index ];
         oP.innerHTML = arrText[ this.index ];
         oSpan.innerHTML = 1+this.index + ' / '+arrText.length;
         
         /*
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
         */
         
         // 思路一：先全部清空，再在当前的li元素中添加
         for( var i=0; i<aLi.length; i++ ){
            aLi[i].className = '';
         }
         this.className = 'active';
         
		/*
         // 思路二：先清空上个li元素的class值，再在当前的li元素中添加
         oldLi.className = '';
         oldLi = this;
         this.className = 'active';
		*/
      };
   }
};
</script>
</head>

<body>

<div id="pic">
   <img src="img/1.png" />
  <span>数量正在加载中……</span><!--图片的页码-->
  <p>文字说明正在加载中……</p><!--图片文字说明-->
  <ul>
  </ul>
</div>

</body>
</html>

图片

图片切换实例扩展

1、this引用

2、函数合并

// 初始化
function fnTab(){
   oImg.src = arrUrl[num];
   oSpan.innerHTML = 1+num+' / '+arrUrl.length;
   oP.innerHTML = arrText[num];
   for( var i=0; i<aLi.length; i++ ){
      aLi[i].className = '';
   }
   aLi[num].className = 'active';
}
fnTab(); //如果没有这一行，在没有点击的情况下，不会有图片出现

for( var i=0; i<aLi.length; i++ ){
   aLi[i].index = i;        // 索引值
   aLi[i].onclick = function (){
      num = this.index;
      fnTab();
   };
}

实例：QQ列表展示

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul , h2 { padding:0; margin:0; }
li { list-style:none; }
#list { width:240px; border:1px solid #333; margin:0 auto; }
#list .lis {}
#list h2 { height:30px; line-height:30px; text-indent:20px;
   background:url(img/ico1.gif) no-repeat 5px center #6FF;
   color:#000; }
#list .active {
   background:url(img/ico2.gif) no-repeat 5px center #FF9;
   color:#000; }
#list ul { display:none; }
#list ul li { line-height:24px;
   border-bottom:1px solid #333; text-indent:24px; }
#list ul .hover { background:#6FF; }
</style>
<script>
window.onload = function (){
   var oUl = document.getElementById('list');
   var aH2 = oUl.getElementsByTagName('h2');
   var aUl = oUl.getElementsByTagName('ul');
   var aLi = null;
   var arrLi = [];
   
   for( var i=0; i<aH2.length; i++ ){
      aH2[i].index = i;
      aH2[i].onclick = function (){
         
         for( var i=0; i<aH2.length; i++ ){
            if( i != this.index ){
               aUl[i].style.display = 'none';//隐藏
               aH2[i].className = '';
            }
         }
         
         if( this.className == '' ){
            aUl[this.index].style.display = 'block';//将页面元素转换为块状元素
            this.className = 'active';
         } else {
            aUl[this.index].style.display = 'none';
            this.className = '';
         }
      };
   }
   
   for( var i=0; i<aUl.length; i++ ){
      aLi = aUl[i].getElementsByTagName('li');
      for( var j=0; j<aLi.length; j++ ){
         arrLi.push( aLi[j] );
      }
   }
   
   for( var i=0; i<arrLi.length; i++ ){
      arrLi[i].onclick = function (){
         
         for( var i=0; i<arrLi.length; i++ ){
            if( arrLi[i] != this ){
               arrLi[i].className = '';
            }
         }
         if( this.className == '' ){
            this.className = 'hover';
         }else{
            this.className = '';
         }
      };
   }
};
</script>
</head>

<body>

<ul id="list">
   <li class="lis">
      <h2>我的好友</h2>
      <ul>
         <li>张三</li>
         <li>张三</li>
         <li>张三</li>
         <li>张三</li>
      </ul>
  </li>
   <li class="lis">
      <h2>我的同学</h2>
      <ul>
         <li>李四</li>
         <li>李四</li>
         <li>李四</li>
         <li>李四</li>
         <li>李四</li>
      </ul>
  </li>
   <li class="lis">
      <h2>黑名单</h2>
      <ul>
         <li>张小三</li>
         <li>李小四</li>
      </ul>
  </li>
</ul>

</body>
</html>

kaka_hikun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
索引值应用

添加索引值1、index索引值2、索引值运用：图片切换实例思路一：全部清除思路二：消除上一个<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>ul { padding:0; margin:0; }li { lis
复制链接

扫一扫