JS 图片切换的练习

最新推荐文章于 2024-07-24 11:09:48 发布

ฅ逸魚

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量74

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47186832/article/details/109711050

版权

JavaScript学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换的练习</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
        #outer{
            height: 600px;
            margin: 50px auto;
            padding: 10px;
            background-color: aqua;
            /*设置文本居中*/
            text-align: center;

        }
    </style>

    <script type="text/javascript">
        window.onload=function () {
            /*点击按钮切换图片*/
            //获取按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            //切换图片就是要修改img标签的src属性
            //获取img
            var img = document.getElementsByTagName("img")[0];
            //创建一个数组，保存图片路径
            var imgArr=["img/8.jpeg","img/9.jpg","img/10.jpg","img/11.jpg","img/12.jpg"];
            //创建变量，保存显示图片的索引
            var index = 0;
            //获取id的info的p元素
            var info = document.getElementById("info");
            //设置提示文字
            info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
            //绑定单机响应函数
            prev.onclick=function () {
                index--;
                //判断index是否等于0
                if (index<0){
                    index = imgArr.length-1;
                }
                img.src = imgArr[index];
                info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
            };
            next.onclick=function () {
                //要修改元素就是：属性.属性值
                index++;
                if (index > imgArr.length-1){
                    index = 0;
                }
                img.src = imgArr[index];
                info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
            };
        }
    </script>
</head>
<body>
    <div id="outer">
        <p id="info"></p>
        <img src="img/8.jpeg" alt="dy" height="500px"/>

        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>

ฅ逸魚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 图片切换的练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换的练习</title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ height: 600.
复制链接

扫一扫

专栏目录