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

最新推荐文章于 2022-04-25 23:27:59 发布

surpass0728

最新推荐文章于 2022-04-25 23:27:59 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/surpass0728/article/details/77948908

本文主要讲解如何使用JavaScript来创建一个图片浏览器，强调事件绑定要直接作用于触发元素，并通过setTimeout函数实现图片每秒自动滚动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点：

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

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

<%@ 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>