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

思路:

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

首先需要写好一个合理的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>

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

相关推荐