zoukankan      html  css  js  c++  java
  • js 上下切换图片

    <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>
  • 相关阅读:
    用JAVA自己画一张二维码
    20.custom自定义线程池
    19.线程池的使用
    7.volatile关键字
    8.volatile原子性
    10.线程通信CountDownLatch
    9.线程通信wait、notify
    11.线程通信CountDownLatch
    14.ThreadLocal
    13.FutureTask异步计算
  • 原文地址:https://www.cnblogs.com/yintingting/p/4626291.html
Copyright © 2011-2022 走看看