前端

图片滚动显示


实现一个类似百度图片切换播放的例子

  1. 示例
  2. javascript dom操作
  3. javascropt事件
  4. javascript作用域闭包

功能：

  • 有大图和缩略图
  • 有上一张图和下一张图切换
  • 可以键盘控制显示上一张图和下一张图
  • 有显示上一组和下一组的功能

效果预览：
可以类似目前的百度图片中的效果

基本HTML结构和CSS代码：
html：

<body>
    <h1>图片展示</h1>
    <div id="pics">
        <div id="bigpic">
            <span id="big-prev"></span>
            <img src="image/000.jpg" width="650" height="400">
            <span id="big-next"></span>
        </div>
        <div id="smallPics">
            <span id="li-prev"></span>
            <ul id="smallPicsList"></ul>
            <span id="li-next"></span>
        </div>
    </div>
    <script type="text/javascript" src="demo2.js"></script>
</body>

主要css代码：

#big-prev {
    background: url("big-prev.png");
    display: inline-block;
    width: 60px;
    height: 120px;
    cursor: pointer;
    float: left;
    margin-top: 120px;
}

#li-prev {
    background: url("icon_prve.jpg");
    display: inline-block;
    height:40px;
    width:20px;
    display: inline-block;
    float: left;
    cursor:pointer;
}

效果：

下面是主要的js代码：
首先要将图片按照分组显示在下边的列表里。
var eg = new Object();

//定义图片数据
eg.$ = function(id){
    return document.getElementById(id);
};

eg.data = ["000.jpg","001.jpg","002.jpg","003.jpg","004.jpg",
            "005.jpg","006.jpg","007.jpg"];

eg.showNum = 0; //默认显示
eg.groupNum = 1; //当前组数
eg.groupSize = 5; //每组图片数

eg.showSmall = function(group){
    var ul = eg.$("smallPicsList");
    //每次显示前清空旧的数据
    ul.innerHTML = '';
    var start = (group-1)*eg.groupSize;
    var end = group*eg.groupSize;
    for (var i = start;(i<end&&i<eg.data.length); i++) {
        var li = document.createElement("li");
        li.innerHTML = '<img src="image/'+eg.data[i]+'" id="small'+i+'"width="135" height="100"/>';
        ul.appendChild(li);
    };
};

eg.init = function(){
    eg.showSmall(1);
};

eg.init();

效果：

接下来要实现点击图片的响应。
要在每次生成缩略图片的时候就添加监听器，来监听点击的动作。

for (var i = start;(i<end&&i<eg.data.length); i++) {
        var li = document.createElement("li");
        li.innerHTML = '<img src="image/'+eg.data[i]+'" id="small'+i+'"width="135" height="100"/>';    
        (function(i){
            eg.addListener(li,"click", function(){
                eg.showNum = i;
                eg.showBig();
                //console.log(i);
            });    
    })(i);
    ul.appendChild(li);}

这里用到了IIFE（立即执行函数表达式），创建了闭包。关于更多javascript作用域闭包的内容，会在后面的文章中介绍点我。

然后实现点击上（下）一张（组）图按钮，要注意边界图片时缩略图和大图的变化。

eg.prevBig = function(){
    //console.log(eg.showNum);
    if (eg.showNum-1>=0) {
        if ((eg.showNum)%eg.groupSize ==0) {
            eg.showSmall(eg.groupNum-1);
            eg.groupNum--;
        };
        eg.showNum--;
        eg.showBig();
    }else{
        alert("已经是第一张了！");
    }
};

eg.prevsmall = function(){
    console.log(eg.groupNum);
    if(eg.groupNum -1 >=1){
        eg.showSmall(eg.groupNum-1);
        eg.groupNum--;
        eg.showNum = eg.groupNum*eg.groupSize-eg.groupSize;
        eg.showBig();
    }
};

eg.addListener(eg.$("big-prev"),"click",function(){
    eg.prevBig();
});

eg.addListener(eg.$("li-prev"),"click",function(){
    eg.prevsmall();
});

至此，基本功能已经实现，还有键盘动作。

eg.addListener(document,"keyup",function(e){
    e = e||event;
    if (e.keyCode == 37) {eg.prevBig();};
    if (e.keyCode == 39) {eg.nextBig();};
});

javascript DOM操作

javascript事件

javascript作用域闭包

分享到