JavaScript：画廊案例

　　经常会在网上看到这样的操作：有几个按钮。可以控制器图片的上一张、下一张。那么现在就使用按钮的click单击事件来切换img的图片。

此时由于只是简单的演示，将所有的图片保存在images目录中。所有的图片应该使用相同的命名前缀,如”pic_*.jpg“。假设”*.jpg”的取出范围为：1~3。

注意：如果增加到3了，那么就重新从1开始显示；如果减小到1了，那么就从3开始显示。

范例1：手动切换图片

event.html

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" content=event.html"">
        <meta name="keywords" content="event,html,js">
        <title>javascript的程序开发之事件处理</title>
        <script type="text/javascript" src="event.js"></script>
    </head>
    <body>
        <div id="pictureDiv">
            <img src="images/pic_1.jpg" id="picImg">
        </div>
        <div id="buttonDiv">
            <button id="previousBtn">上一张</button>
            <button id="nextBtn">下一张</button>
        </div>
    </body>
</html>

event.js

/*
    要求：使用按钮的单击事件来切换img的图片
*/
var index = 1;
function picChanged (index) {
    //获取HTML元素图片对象
    var obj = document.getElementById("picImg");

    //重新设置图片
    obj.src = "images/pic_"+index+".jpg";
}

window.onload = function(){  //为onload事件绑定事件
    //获取HTML元素上一张按钮对象
    var previousBtn = document.getElementById("previousBtn");

    //为上一张按钮对象绑定事件
    if (previousBtn != undefined) {
        previousBtn.addEventListener("click",function(){
            if (index > 1){
                index--
            }else{
                index = 3;
            }
            picChanged(index);
        },false);
    };

    //获取HTML元素下一张按钮对象
    var nextBtn = document.getElementById("nextBtn");

    //为下一张按钮对象绑定事件
    if (nextBtn != undefined) {
        nextBtn.addEventListener("click",function(){
            if (index < 3) {
                index++
            }else{
                index = 1;
            }
            picChanged(index);
        },false);
    };
}

pic_1.jpg　　　　　　　　　　　　　　　　　　　　　　　　pic_2.jpg

pic_3.jpg

　　发现，现在的操作都是人为去进行切换，那么也可以实现自动切换。使用setTimeout函数进行自动切换。

　setTimeout(执行函数,间隔)：间隔一毫秒为单位

范例2：自动切换图片

event.html

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="description" content=event.html"">
        <meta name="keywords" content="event,html,js">
        <title>javascript的程序开发之事件处理</title>
        <script type="text/javascript" src="event.js"></script>
    </head>
    <body>
        <div id="pictureDiv">
            <img src="images/pic_1.jpg" id="picImg">
        </div>
    </body>
</html>

event.js

/*
    要求：使用定时器自动来切换img的图片
*/
var index = 1;  //默认从第一张开始显示
function picChanged () {  //切换图片

    if (index < 3) {
        index ++;
    }else{
        index = 1;  //已经显示完了，那么需要重新显示
    }
    
    //获取HTML元素图片对象
    var obj = document.getElementById("picImg");

    //重新设置图片
    obj.src = "images/pic_"+index+".jpg";

    //定时器执行操作
    setTimeout(function() {
        picChanged();
    }, 1000);
}

window.onload = function(){ //为onload事件绑定事件
    //定时器执行操作
    // setTimeout(function() {
    // picChanged();
    // }, 1000);
    setTimeout(picChanged(),1000);
}

总结：

1—每一个HTML元素实际上在JavaScript都表示一个对象，对象可以调用里面的属性；

2—每一个元素都可以利用addEventListener()函数动态绑定，并且最为重要的是，都会在页面加载后绑定；

3—取得元素对象：document.getElementById(“ID名称”)。

posted @ 2016-08-31 13:41 XYQ全哥阅读(684) 评论(0) 编辑收藏举报

刷新页面返回顶部

JavaScript：画廊案例

公告