经常会在网上看到这样的操作:有几个按钮。可以控制器图片的上一张、下一张。那么现在就使用按钮的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. NSCharacterSet 简单用法

    NSCharacterSet 简单用法 NSCharacterSet其实是许多字符或者数字或者符号的组合,在网络处理的时候会用到 NSMutableCharacterSet *base = [NSMu ...

  2. Qt 学习资料

    Qter开源社区http://www.qter.org/ [Qt教程], 作者yafeilinux [视频] QT学习之路:从入门到精通 <C++ Qt 编程视频教程>

  3. myeclipse显示行号

    1.ctrl+f10,选择显示行号: 2.窗口(windows)-->首选项-->常规-->编辑器-->文本编辑器-->选择显示行号

  4. [转]C#将image中的显示的图片转换成二进制

    本文转自:http://www.cnblogs.com/shuang121/archive/2012/07/09/2582654.html .将Image图像文件存入到数据库中 我们知道数据库里的Im ...

  5. Apache Spark源码走读之2 -- Job的提交与运行

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本文以wordCount为例,详细说明spark创建和运行job的过程,重点是在进程及线程的创建. 实验环境搭建 在进行后续操作前,确保下列条件已满足. 下 ...

  6. MySQL 数据库设计 笔记与总结(4)维护优化

    [维护和优化的工作] ① 维护数据字典 ② 维护索引 ③ 维护表结构 ④ 在适当的时候对表进行水平拆分或垂直拆分 [维护数据字典] a 使用第三方工具对数据字典进行维护 b 利用数据库本身的备注字段来 ...

  7. 如何获取DIV的id

    $(obj).attr("id");参数可以是id也可以是其他例如name等属性

  8. Fortran并行计算的一些例子

    以下例子来自https://computing.llnl.gov/tutorials/openMP/exercise.html网站 一.打印线程(Hello world) C************* ...

  9. Lazarus中TScreen类使用介绍

    描述:虚拟屏幕(桌面)可以包含多个物理显示器.Screen对象是鼠标指针.字体.窗体. 对于Delphi兼容的(不可见)DataModules也被列出了. 同时也追踪当前活动窗体窗体.控件和指针. S ...

  10. C++ char*,const char*,string的相互转换

    1. string转const char* string s ="abc";constchar* c_s = s.c_str(); 2. const char*转string   ...