本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议
》和
《
阿里云开发者社区知识产权保护指引
》。如果您发现本社区中有涉嫌抄袭的内容,填写
侵权投诉表单
进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
经常会在网上看到这样的操作:有几个按钮。可以控制器图片的上一张、下一张。那么现在就使用按钮的click单击事件来切换img的图片。
此时由于只是简单的演示,将所有的图片保存在images目录中。所有的图片应该使用相同的命名前缀,如”pic_*.jpg“。假设”*.jpg”的取出范围为:1~3。
注意:如果增加到3了,那么就重新从1开始显示;如果减小到1了,那么就从3开始显示。
范例1:手动切换图片
event.html
<!doctype html>
<html lang="zh-CN">
<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>
<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">
<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>
<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名称”)。
程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5825583.html
,如需转载请自行联系原作者