jQuery实现图片前进后退

来源:互联网 发布:mac 重新安装程序 编辑:程序博客网 时间:2024/05/08 05:40
<head>
    <title></title>
    <style type="text/css">
       img
       {
           width:300px;height:300px;
           }
       a
       {
           text-decoration:none;
           }
    </style>


    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('img').toggle(
             function () { $('img').attr('src', 'images/2.jpg') }, function () { $('img').attr('src', 'images/3.jpg') },
             function () { $('img').attr('src', 'images/1.jpg') } )


             //下标是从0开始的
             var arr=[1,2,3,4];
             var count=1;
             $('#a1').click(function(){
                 if(count>0){count--;}
                  $('img').attr('src','images/'+arr[count]+'.jpg')
             })


              $('#a2').click(function(){
                 if(count<3){count++;}
                  $('img').attr('src','images/'+arr[count]+'.jpg')
             })




          
        })
    </script>


</head>
<body>
  <span id="a1">后退</span>  <img  alt="" src="images/1.jpg" /><span id="a2">前进</span>
</body>
</html>