代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="pic">
        <img src="img1.png" alt="图片" id="img">
        <button id="pref">上一张</button>
        <button id="next" >下一张</button>
    </div>
</body>
<link rel="stylesheet" href="pic_style.css">
<script src="pic_script.js"></script>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}   /* 取消默认样式 */

#pic{
    width: 1000px;
    height: 700px;
    margin: 0 auto;
    padding: 100px;
    text-align: center;
}

window.onload = function(){
    var pic = document.getElementById("img");
    var lt = ["img1.png", "img2.png", "img3.png", "img4.png", "img5.png", "img6.png", "img7.png", "img8.png", "img9.png", "img10.png", "img11.png", "img12.png"];    //存放图片的数组
    index = 0;  //数组的索引
    var pref = document.getElementById("pref");
    var next = document.getElementById("next");
    pref.onclick = function(){
        index --;
        if (index < 0){
            index = lt.length - 1;  //切换到最后一张
        }
        pic.src = lt[index];
    };
    next.onclick = function(){
        index ++;
        if (index > lt.length - 1){
            index = 0;  //切换到第一张
        }
        pic.src = lt[index];
    };
};