js 上下切换图片

最新推荐文章于 2022-05-24 21:42:59 发布

weixin_30339457

最新推荐文章于 2022-05-24 21:42:59 发布

阅读量53

点赞数

原文链接：http://www.cnblogs.com/yintingting/p/4626291.html

版权

<html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <img class="icon" src="img/icon_01.png">
   <p></p>
   <button class="btn1">上一张</button>
   <button class="btn2">下一张</button>

   <script>
       // 拿到所有的标签
       var img = document.getElementsByClassName('icon')[0];
       var btn1 = document.getElementsByClassName('btn1')[0];
       var btn2 = document.getElementsByClassName('btn2')[0];

       // 业务处理
         var maxNumber = 9;
         var minNumber = 1;
///        //   当前的值
         var currentValue = minNumber;

      // 点上一张
        btn1.onclick = function(){
           if(currentValue == minNumber){
               currentValue = maxNumber;
           }else{
               currentValue = currentValue - 1;
           }
            img.src = 'img/icon_0'+currentValue +'.png';
        }
      // 点下一张
        btn2.onclick = function(){
            if(currentValue == maxNumber ){
                currentValue = minNumber;
            }else{
                currentValue = currentValue + 1;
            }
            console.log(currentValue);
            img.src = 'img/icon_0'+currentValue +'.png';
        }


   </script>

</body></html>

转载于:https://www.cnblogs.com/yintingting/p/4626291.html

weixin_30339457

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 上下切换图片

<html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <img class="icon" src="img/icon_01.png"> <p>&lt...
复制链接

扫一扫