JS点击更换图片

博主： literature
发布时间：2023 年 08 月 27 日
115 次浏览
关闭评论
1602字数
分类：主机教程

JS点击更换图片

数组形式:

function RotationChart() {
        var pic = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; //图片位置
        var num = 0;
        // console.log(pic.length)
        var img = document.querySelector('#img'); //查询图片
        var xyg = document.querySelector('#xyg'); //下一个
        var syg = document.querySelector('#syg'); //上一个
        //console.log(xyg)
        xyg.onclick = function() {
            num++;
            if (num == pic.length) {
                num = 0;
            }
            img.src = pic[num];
        }

        syg.onclick = function() {
            num--;
            if (num < 0) {
                num = pic.length - 1;
            }
            img.src = pic[num];
        }
    }

需要使用时直接调用函数RotationChart()即可

本文作者：小小孩子们
转载请注明原文地址
本文地址https://www.xxhzm.cn/index.php/archives/3/

最后修改：2023 年 08 月 27 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

JS点击更换图片

literature • 2023 年 08 月 27 日

<h2>JS点击更换图片</h2><pre><code>    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    window.onload = function() {
    var bj = document.getElementById("bj") //要处理的图片
    var syg = document.getElementById("syg") //点击上一个
    var xyg = document.getElementById("xyg") //点击下一个
    sz = 1 //初始化图片为第一张
    xyg.onclick = function() { //下一张点击事件
     if (sz == 4) {
     sz = 1 //如果数字等于四则重置
     } else {
     sz++ //sz=sz+1
     }
     bj.src = +sz + ".jpg" //更换图片
     }
    var syg = document.getElementById("syg") //上一个
     syg.onclick = function() { //上一张点击事件
    if (sz == 1) {
     sz = 4 //如果数字等于四则初始化他 
     } else {
     sz-- //sz=sz+1
     }
     bj.src = +sz + ".jpg" //更换图片 //更换图片
     }
    }
    </script>
    <style>
     img {
     width: 100px;
     height: 100px;
    }
    </style>
    </head>
    <body>
    <div><p id="syg">上一张</p><p id="xyg">下一张</p><p><img src="1.jpg" id="bj" alt="背景图"style=""><br />
</div>
    </body> 
    </html></code></pre><p><img src="https://www.xxhzm.cn/usr/uploads/2021/07/346094123.png" alt="tu.png" title="tu.png" style="" data-original="https://www.xxhzm.cn/usr/uploads/2021/07/346094123.png" class="aligncenter"style=""></p><p>数组形式:</p><pre><code>function RotationChart() {
        var pic = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; //图片位置
        var num = 0;
        // console.log(pic.length)
        var img = document.querySelector('#img'); //查询图片
        var xyg = document.querySelector('#xyg'); //下一个
        var syg = document.querySelector('#syg'); //上一个
        //console.log(xyg)
        xyg.onclick = function() {
            num++;
            if (num == pic.length) {
                num = 0;
            }
            img.src = pic[num];
        }

syg.onclick = function() {
            num--;
            if (num < 0) {
                num = pic.length - 1;
            }
            img.src = pic[num];
        }
    }
</code></pre><p>需要使用时直接调用函数RotationChart()即可</p><p>本文作者：小小孩子们<br />转载请注明原文地址<br />本文地址https://www.xxhzm.cn/index.php/archives/3/</p>

JS点击更换图片

JS点击更换图片

live/msn等微软绝版邮箱详细的注册教程

欢迎使用 Typecho

一个功能强大又好用的RSS订阅器：FreshRSS安装教程

VPS使用BaiduPCS-Go高速下载百度网盘的文件，支持上传/离线下载等操作

使用Caddy申请免费的Let’s Encrypt泛域名SSL证书

分享2款网站程序源码/主题等后门检测工具

502 Bad Gateway自动重启脚本

如何快速成为短视频运营高手-星泽V社

利用Armitage进行渗透测试

使用phpSound搭建私人的音乐网站

JS点击更换图片