js实现图片切换（经典代码集锦）

最新推荐文章于 2024-08-01 21:11:33 发布

mischen520

最新推荐文章于 2024-08-01 21:11:33 发布

阅读量1w

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/miachen520/article/details/51850349

版权

javascript 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

js实现图片切换（经典代码集锦）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简单的图片切换</title>
    <script>
        var crr=1;
        function changePic(){
            var imgObj=document.getElementById("myPic");
            imgObj.src=crr+".jpg";

        }
        window.οnlοad=function(){
            document.getElementById("1").addEventListener("click",function(){
                crr=1;
                changePic();

            },false);
            document.getElementById("2").addEventListener("click",function(){
                crr=2;
                changePic();
            },false);
            document.getElementById("3").addEventListener("click",function(){
                crr=3;
                changePic();
            },false);
            document.getElementById("4").addEventListener("click",function(){
                crr=4;
                changePic();
            },false);
            document.getElementById("5").addEventListener("click",function(){
                crr=5;
                changePic();
            },false);
            document.getElementById("6").addEventListener("click",function(){
                crr=6;
                changePic();
            },false);
        }
    </script>
</head>
<body>
    <div id="showPic">
        <img src="1.jpg" id="myPic" style="width:320px">
    </div>
    <div id="ctrlPic">
        <button id="1">1</button>
         <button id="2">2</button>
        <button id="3">3</button>
        <button id="4">4</button>
        <button id="5">5</button>
        <button id="6">6</button>
    </div>

</body>
</html>