经常会在网上看到这样的操作：有几个按钮。可以控制器图片的上一张、下一张。那么现在就使用按钮的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="data: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="data: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名称”)。

JavaScript：画廊案例的更多相关文章

  1. JavaScript 入门案例

    四.  JavaScript 入门案例 在看本节之前,笔者建议您先看 JavaScript 基础篇  https://www.cnblogs.com/IT-LFP/p/10945884.html 1. ...

  2. JavaScript小案例-阶乘！

    JavaScript小案例-阶乘! 阶乘:就是像台阶一样一阶一阶的,从高阶到低阶,依次乘下来!代码超少!容易理解! // factorial 阶乘 // 如果 function factorial(n ...

  3. JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究

    这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...

  4. javascript基础案例解析

    学完了JavaScript基础部分,总结出一些基本案例,以备日后查看! 1.九九乘法口诀表:在控制台中输出九九乘法口诀表!代码如下: <!DOCTYPE html> <html> ...

  5. html笔记05：html、css、javascript综合案例

    1.首先是html代码: <!-- markup time --> <div class="wrapper wb"> <div class=" ...

  6. javascript 精典案例分析一览

    1.[优雅代码]深入浅出 妙用Javascript中apply.call.bind http://www.cnblogs.com/coco1s/p/4833199.html 2.1.0.1 ionic ...

  7. 一个用于每一天JavaScript示例-SVG中间javaScript画廊

    <?xml version="1.0" standalone="no"? > <!DOCTYPE svg PUBLIC "-//W3 ...

  8. JavaScript常见案例

    一.点灯开关控制: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  9. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

随机推荐

  1. 四、saltstack如何管理对象？

    实验前环境: [root@super65 ~]# salt-key -L[root@super65 ~]# salt-key -a super65.cn -y salt管理对象简介: saltstac ...

  2. jquery判断是否出现滚动条

    $(document).ready(function(){ var winH = $(window).height(); //页面可视区域高度 $(window).scroll(function () ...

  3. 是否采用Sybase形式的自动字符串转义(用 '' 表示 '）

    ;; 关于php.ini ;; ; 这个文件必须命名为'php.ini'并放置在httpd.conf中PHPINIDir指令指定的目录中. ; 最新版本的php.ini可以在下面两个位置查看: ; h ...

  4. excel表中内容如何反排列

    如题,我的意思是,比如excel表中有如下内容: 1.红色 2.黄色 3.蓝色 现在我需要一次性全部反向排列,变成 3.蓝色 2.黄色 1.红色 这不是纯数字排序,因为我序号不是自然数的等差数列,其中 ...

  5. SVN版本管理系统的安装 CentOS + Subversion + Apache + Jsvnadmin

    CI服务器:192.168.4.221 root用户操作                            建议安装前更新操作系统 # yum update 更新完成后重启 # reboot 安装 ...

  6. windows服务器。linux服务器的集成包推荐

    我对linux不熟悉,这个有点不好意思,虽然我是做php开发的.我只是对apache+php+mysql的操作熟悉而已,但是linux的服务器配置什么的都太懂 所以我就安装了windows2008,安 ...

  7. [ZZ] 景深效果(Depth of Field) , Pass1 将场景渲染到一个RenderTarget,做为清晰版, Pass2: BluredRT , Pass3: WDepth = Depth / Far_Z_Clip

    http://blog.csdn.net/xoyojank/article/details/1883520   什么是景深效果? 景深效果,简称DOF,在人眼跟光学摄像设备上很常见.如下图: 简单地来 ...

  8. PHP自动解压上传的rar文件

    PHP自动解压上传的rar文件   浏览:383 发布日期:2015/07/20 分类:功能实现 关键字: php函数 php扩展 大家都知道php有个zip类可直接操作zip压缩文件,可是用户有时候 ...

  9. Oracle数据库--SQL

    1.事务(Transaction ) 1)命名事务 set transaction name ‘transaction_name ’; 2)查看事务是否存在 select name from v$tr ...

  10. VPN服务器环境搭建

    一.VPN服务器环境说明 操作系统:CentOS release 6.4 (Final) 本地网卡: 复制代码 代码如下: # ifconfig em1 Link encap:Ethernet HWa ...