使用js设计程序，给你若干张图片，通过单击上一张，下一张按钮实现图片的动态循环显示。【选做 如果没单击按钮，则每3秒钟自动循环显示下一张图片】

以下是使用JavaScript实现图片轮播的示例代码：

HTML代码：

<div id="image-container">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
</div>
<button id="prev-btn">上一张</button>
<button id="next-btn">下一张</button>

JavaScript代码：

var imageContainer = document.getElementById("image-container");
var images = imageContainer.getElementsByTagName("img");
var prevBtn = document.getElementById("prev-btn");
var nextBtn = document.getElementById("next-btn");
var currentIndex = 0;
var timer;

// 显示当前图片
function showImage() {
    for (var i = 0; i < images.length; i++) {
        images[i].style.display = "none";
    }
    images[currentIndex].style.display = "block";
}

// 切换到上一张图片
function prevImage() {
    currentIndex--;
    if (currentIndex < 0) {
        currentIndex = images.length - 1;
    }
    showImage();
}

// 切换到下一张图片
function nextImage() {
    currentIndex++;
    if (currentIndex >= images.length) {
        currentIndex = 0;
    }
    showImage();
}

// 绑定上一张按钮的点击事件
prevBtn.onclick = function() {
    prevImage();
    clearInterval(timer);
}

// 绑定下一张按钮的点击事件
nextBtn.onclick = function() {
    nextImage();
    clearInterval(timer);
}

// 自动轮播
timer = setInterval(function() {
    nextImage();
}, 3000);

在上述代码中，我们首先获取图片容器、图片、上一张按钮和下一张按钮的DOM元素，并且定义了当前显示的图片索引和自动轮播计时器。然后，我们定义了三个函数，分别是显示当前图片、切换到上一张图片和切换到下一张图片。在显示当前图片函数中，我们遍历所有图片，将它们的display属性设置为none，然后将当前索引对应的图片的display属性设置为block，从而显示出来。在切换到上一张和下一张图片函数中，我们先修改当前索引，然后调用显示当前图片函数来显示新的图片。最后，我们绑定了按钮的点击事件和自动轮播的计时器。当用户点击按钮时，我们会清除自动轮播的计时器，从而停止自动轮播。