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

自定义属性之图片切换实例——初始化——JS学习笔记2015-5-28（第41天）

2015-05-28 23:31 816 查看

思路:

延续上一节说的利用自定义属性来作为桥梁，建立匹配关系，然后改变页面中元素的显示效果；

首先需要写好一个合理的HTML结构 // 何为合理呢？就是说考虑这个结构哪些需要提前写好的，哪些又是可以通过程序来动态实现的

然后写好相应的CSS样式文件，让基本的构造出来；

最后通过JS来控制相关页面元素的显示效果；

实例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自定义属性之图片切换实例</title>

<style>
div, p, ul { margin: 0; padding: 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;}
#pic p, #pic span {position: absolute; width: 400px; height: 30px; color: #fff; text-align: center; line-height: 30px; 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 = ['图片1','图片2','图片3','图片4'];
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';

};
</script>
</head>

<body>
<div id="pic">
<img src="">
<span>数量正在加载中</span>
<p>正在加载中。。。</p>
<ul></ul>

</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航