JavaScript学习（一）-图片浏览器

来源：互联网发布：淘宝店如何退货编辑：程序博客网时间：2024/06/06 03:44

重点：

所有的事件一定要绑定在触发元素上

每一件事件都一定要捆绑在一个函数进行事件的处理

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title></head><body>    <script type="text/javascript">        var imgName=new Array("a.jpg","b.jpg","c.jpg","d.jpg","e.jpg");        var foot=1;        window.onload=function(){            var pbut=document.getElementById("previousButton");            var nbut=document.getElementById("nextButton");            var img=document.getElementById("img");            nbut.addEventListener("click",function(){                if(foot>=imgName.length){                    foot=0;                }                img.src="images/"+imgName[foot++];            },false);            pbut.addEventListener("click",function(){                if(foot<=0){                    foot=imgName.length-1;                }                img.src="images/"+imgName[foot--];            },false);        }    </script>    <button type="button" onclick="clickHandle()">按我</button>    <span id="info">        <img id="img" src="images/a.jpg" height="60%">    </span>    <div id="controlDiv">    <button id="previousButton">上一张</button>    <button id="nextButton">下一张</button>    </div></body></html>

用setTimeout函数实现自动的图片滚动的操作功能

每一秒更新一次

setTimeout(setPic,1000);

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title></head><body>    <span id="info">        <img id="img" src="images/a.jpg" height="60%">    </span></body><script type="text/javascript">    var imgName=new Array("a.jpg","b.jpg","c.jpg","d.jpg","e.jpg");    var foot=0;    function setPic(){        var img=document.getElementById("img");        img.src="images/"+imgName[foot++];        console.log(img.src);        if(foot>=imgName.length){            foot=0;        }        //每一秒更新一次        setTimeout(setPic,1000);    }    setPic();</script></html>

阅读全文

0 0