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>

 

posted @ 2015-07-07 10:43  Emyin  阅读(640)  评论(0)    收藏  举报