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="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名称”)。

程序猿神奇的手，每时每刻，这双手都在改变着世界的交互方式！

本文转自当天真遇到现实博客园博客，原文链接：http://www.cnblogs.com/XYQ-208910/p/5825583.html，如需转载请自行联系原作者

JavaScript：画廊案例相关推荐

JavaScript 时钟案例
今天我要分享的JavaScript时钟案例的知识点创建一个文件夹里面在创建一个css和js的文件夹,把css和js引入,然后开始写html,在body里添加div标签设置类,div标签里放一个spa ...
JavaScript的案例：模拟聊天界面发送信息
JavaScript的案例:模拟聊天界面发送信息这是我第一次写博客,也是一位刚入门的前端菜鸟!希望大家多多帮助与支持! 1.如图所示:点击下面头像即可切换用户,这也是我和我女朋友用的第一个情侣头像, ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
JavaScript项目案例
简单案例案例一:完成"鼠标经过切换图片"的案例案例二:完成"百度换肤效果"的案例案例三:完成"鼠标展示"的案例案例四:完成" ...
Web前端：简易灯箱画廊案例设计
题目要求参考代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Javascript小案例（一）：仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: (截图日期:2017年6月18日) 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋 ...
jQuery 美女画廊案例
源码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...

JavaScript：画廊案例

JavaScript：画廊案例相关推荐

最新文章

热门文章