yanghongchen666 发表于 2021-3-2 12:10:52

JS使用DOM 鼠标键盘操作实现图片的翻页

使用了dom中的onclick事件来绑定两个按钮的功能
使用了onkeydown事件来绑定键盘左键跟右键
一个比较简单的使用js实现的小效果~


<!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>
    <style>
      *{
            margin: 0;
            padding: 0;
      }

      #outer{
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: greenyellow;
            /*文本居中*/
            text-align: center;
      }
    </style>

    <script>

      window.onload = function(){

            /*
                点击按钮切换图片
            */

            //获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            /*
                要切换图片就是要修改img标签的src属性
               
            */

            //获取img标签
            var img = document.getElementsByTagName("img");

            //创建一个数组，用来保存图片的路径
            var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
            

            //创建一个变量，来保存当前正在显示图片的索引
            var index = 0;

            //设置提示文字
            //获取id为info的p元素
            var info = document.getElementById("info");
            //设置提示文字
            info.innerHTML = "一共 " + imgArr.length + " 张图片， 现在第 " + (index+1) + " 张";

            //分别为两个按钮绑定单机响应函数
            prev.onclick = function(){
                /*
                  切换到上一张，index自减
                */
                index--;
                //判断index是否小于0
                if(index < 0){
                  //如果index小于0,则调回图片4.
                  index = imgArr.length - 1;
                }

                img.src = imgArr;

                //当点击按钮以后，重新设置信息
                info.innerHTML = "一共 " + imgArr.length + " 张图片， 现在第 " + (index+1) + " 张";
            };

            next.onclick = function(){
                /*
                  切换到下一张,index自增
                */
                index++;
                //判断index是否大于4
                if(index > imgArr.length - 1){
                  //如果index大于4则跳回图片1
                  index = 0;
                };

                //切换图片就是修改img的src属性
                //要修改一个元素属性， 元素.属性 = 属性值
                img.src = imgArr;

                info.innerHTML = "一共 " + imgArr.length + " 张图片， 现在第 " + (index+1) + " 张";
            };

            //给document绑定一个键盘按下事件
            document.onkeydown = function(event){
                event = event || window.event;
                /*
                  键盘按下左键则往后退
                  键盘按下右键则向前翻
                */
                switch(event.keyCode){
                  //左键37
                  case 37:
                        //切换到上一张
                        index--;
                        if(index < 0){
                            //切换到最后一张图片
                            index = imgArr.length-1;
                        }
                        info.innerHTML = "一共 " + imgArr.length + " 张图片， 现在第 " + (index+1) + " 张";
                        img.src = imgArr;
                        break;
                  //右键39   
                  case 39:
                        //切换到下一张
                        index ++;
                        //如果index大于图片数组的长度
                        if(index > imgArr.length-1){
                            //切换回第一张图片
                            index = 0;
                        }
                        img.src = imgArr;
                        info.innerHTML = "一共 " + imgArr.length + " 张图片， 现在第 " + (index+1) + " 张";
                        break;
                }
            };
      };

    </script>
</head>
<body>
    <div id="outer">

      <p id="info"></p>

      <img src="img/1.jpg" alt="冰棍" />

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

hornwong 发表于 2021-3-2 18:34:11

感谢分享！

一颗草莓头子 发表于 2021-3-3 09:29:05

{:5_105:}

何处追寻 发表于 2021-3-5 09:44:00

{:10_256:}

very 发表于 2021-3-5 13:47:11

{:5_106:}

chenyiyun 发表于 2021-3-6 16:10:30

1
页: [1]
查看完整版本: JS使用DOM 鼠标键盘操作实现图片的翻页