您的位置：首页 > Web前端 > JavaScript

自定义属性之图片切换实例——初始化、实现切换效果——JS学习笔记2015-5-29（第42天）

2015-05-29 23:42 971 查看

这里已经实现了图片的切换功能，注意思路还是利用自定义属性当做桥梁，来变换匹配的对应元素；

<!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>
*/

// 思路一：全部清空，当前添加
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
this.className = 'active';

/*
// 思路二：清空上个，当前添加
oldLi.className = '';
oldLi = this;
this.className = 'active';
*/
};
}
};
</script>
</head>

<body>

<div id="pic">
<img src="" />
<span>数量正在加载中……</span>
<p>文字说明正在加载中……</p>
<ul></ul>
</div>

</body>
</html>

View Code
这里要提到的一点就是：

这里的 this.index 其实就可以看成是一个数字，只不过是动态的数字罢了，要理解本质；

还有就是一定要动手实操，哪怕是照着原来的代码敲一遍，（实操可以抵御瞌睡、发现问题、增强记忆和理解）

这里实际操作就发现一个问题：

aLi[i].index = i; // 建立索引值要放到点击事件的外部，否则是无法发生作用的；这个应该跟后面的作用域相关

自己敲的js

<script type="text/javascript">
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;

for( var i=0; i<arrUrl.length; i++ ){
oUl.innerHTML += '<li></li>';
}

// 初始化
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;

for(var j=0; j<arrUrl.length; j++){
// arrUrl[j].className = '';
aLi[j].className = '';
// aLi[this.index].className = 'active'; 这个代码可以实现，这里的就是点击的第this.index个li
this.className = 'active'; // 这个代码也可以实现，都是给当前元素添加active样式。这里的this是指当前li
//也就是说二者指向的都是同一个元素，不过显然后者代码更简洁
}
}
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航