按钮切换图片

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>学习Js</title>
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="picwrap">
            <img src="img/jg1.jpg" id="mypic"/>
        </div>
        <div id="butwrap">
            <button id="prebutton">上一张</button>
            <button id="nextbutton">下一张</button>
        </div>
    </body>
</html>

js

curr = 1;   //初始为1
function changepic(){
     var pic = document.getElementById("mypic");
     pic.src = 'img/jg' + curr + '.jpg';
}
window.onload = function (){
    document.getElementById("prebutton").addEventListener('click',function(){
        if(curr>1){
            curr --;
            changepic()
        }
    },false);
    document.getElementById("nextbutton").addEventListener('click',function(){
        if(curr<4){
            curr ++;
            changepic()
        }
    },false);
}
posted @ 2017-11-20 14:43  多弗朗小明  阅读(151)  评论(0编辑  收藏  举报