表情列表展示

 1  <div class="wrapper">
 2         <div class="show">
 3             <img src="./../face/1.gif" alt="" id="showImg">
 4         </div>
 5 
 6         <div class="list">
 7             <ul id="listBox">
 8                     <!-- 此处 li 为动态创建-->
 9                 <!-- 
10                     <li><img src="./face/1.gif" ></li>
11                     <li><img src="./face/2.gif" ></li>
12                     <li><img src="./face/3.gif" ></li> 
13                -->
14             </ul>
15         </div>
16 
17     </div>

 1 body {
 2             margin: 0;
 3         }
 4         ul {
 5             padding: 0;
 6             margin: 0;
 7             list-style: none;
 8         }
 9         .wrapper {
10             width: 970px;
11             height: 600px;
12             margin: 0 auto;
13             position: relative;
14         }
15         .wrapper .show {
16             width: 960px;
17             height: 400px;
18             text-align: center;
19             border: 5px solid skyblue;
20             line-height: 400px;
21         }
22         .wrapper .show img {
23             width: 48px;
24             height: 48px;
25             vertical-align: middle;
26         }
27 
28 
29         .list {
30             width: 960px;
31             height: 192px;
32             background-color: #f0f0f0;
33             position: absolute;
34             bottom: 0;
35             left: 5px;
36         }
37         .list ul {
38             width: 960px;
39             height: 192px;
40         }
41         .list ul li {
42             float: left;
43             width: 46px;
44             height: 46px;
45             border: 1px solid #fff;
46             cursor: pointer;
47         }
48         .list ul li img {
49             display: block;
50             width: 24px;
51             height: 24px;
52             margin: 11px auto;
53         }

<script>
    // 步骤：
    // 1、获取指定元素
    var showImg = document.getElementById("showImg");
    var listBox = document.getElementById("listBox");

    // 2、定义字符串变量
    var html = "";

    // 3、循环
    for(var i = 0 ;  i < 75 ; i ++){
        // 4、字符串拼接
        html += ‘<li><img src="./face/‘+(i+1)+‘.gif" ></li>‘;
    }
    // 5、渲染字符串（表现）
    listBox.innerHTML = html;

    // 6、等字符串渲染完毕 再获取所有的li标签
    // getElementsByTagName() 可以由父元素调用
    var items =  listBox.getElementsByTagName("li");
    // console.log(items)

    // 7、循环
    // j  是全局变量
    for(var j = 0 ; j < items.length ; j ++ ){
        // 8、属性绑定(实质上是给dom元素添加了属性记录索引值)
        items[j].index = j ;
        // 9、事件绑定
        items[j].onmouseenter = function(){
            // 10、this  事件调用者  当前点击的li标签
            var num = this.index + 1;
            console.log("num:",num);
            // 11、定义图标路径
            var path = "./face/"+num+".gif";
            console.log(path)
            // 12、显示图标
            showImg.setAttribute("src",path);
        }
    }
</script>