2020-10-30

最新推荐文章于 2024-07-14 15:54:59 发布

七天快乐

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量119

点赞数

分类专栏： HTML+JS java 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_43729094/article/details/109382743

版权

java 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML+JS

1 篇文章 0 订阅

订阅专栏

文章目录

- Js图片切换练习题

Js图片切换练习题

#题目要求：
** 相册程序：
在网页中设置一个img标签，要求水平居中，img标签的宽是400px,高是300px.
在img标签的下面同一行内存放四个按钮，分别是首页、上一页、下一页、尾页
对四个按钮设置点击事件：
首页点击时，需要判断当前显示的是否是第一张图片，如果是第一张图片则提示已经是第一张了。如果不是第一张图片，则显示第一张图片
尾页点击时，需要判断当前显示的是否是最后一张图片，如果是最后一张图片则提示已经是最后一张，如果不是最后一张则显示最后一张图片。
点击上一页时，判断是否有上一张，如果有则显示，没有则提示没有上一张
点击下一页时，判断是否有下一张，如果有则显示，没有则提示没有下一张。
存放5张图片
**
#程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #img{
        width: 400px;
        height: 300px;
    }
    </style>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        window.onload=function () {
            let array=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
            let index=0;
            let img=$("img");
            let btn_1=$("btn_1");
            let btn_2=$("btn_2");
            let btn_3=$("btn_3");
            let btn_4=$("btn_4");
            btn_1.onclick=function () {
                if(index===0){
                    alert("已经是第一张了");
                }else{
                    index=0;
                    img.src=array[index];
                }
            };
            btn_2.onclick=function () {
                if(index>0){
                    index--;
                    img.src=array[index];
                }else{
                    alert("没有上一页了");
                }
            };
            btn_3.onclick=function () {
                if(index<array.length-1){
                    index++;
                    img.src=array[index];
                }else{
                    alert("没有下一页了");
                }
            };
            btn_4.onclick=function () {
                if(index===array.length-1){
                    alert("已经是最后一张了");
                }else{
                    index=array.length-1;
                    img.src=array[index];
                }
            }
        }
    </script>
</head>
<body>
<div align="center">
    <img src="1.jpg" id="img" ><br/>
    <input type="button" value="首页" id="btn_1"/>
    <input type="button" value="上一页" id="btn_2" />
    <input type="button" value="下一页" id="btn_3" />
    <input type="button" value="尾页"  id="btn_4"/>
</div>
</body>
</html>

七天快乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-10-30

文章目录Js图片切换练习题Js图片切换练习题#题目要求：** 相册程序：在网页中设置一个img标签，要求水平居中，img标签的宽是400px,高是300px.在img标签的下面同一行内存放四个按钮，分别是首页、上一页、下一页、尾页对四个按钮设置点击事件：首页点击时，需要判断当前显示的是否是第一张图片，如果是第一张图片则提示已经是第一张了。如果不是第一张图片，则显示第一张图片尾页点击时，需要判断当前显示的是否是最后一张图片，如果是最后一张图片则提示已经是最后一张，如果不是最后一张则显示最后一张
复制链接

扫一扫