JS点击更换图片

JS点击更换图片

2021 年 08 月 06 日

20 次浏览

2256字数

    <!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>
    <img src="1.jpg" id="bj" alt="背景图">
     <!--要更换的图片-->
     </div>
    </body> 
    </html>

数组形式:

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://xxhzm.cn/index.php/archives/3/

JS点击更换图片