添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单 进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

经常会在网上看到这样的操作:有几个按钮。可以控制器图片的上一张、下一张。那么现在就使用按钮的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 ,如需转载请自行联系原作者