JavaScript 两个按钮，实现图片的切换

最新推荐文章于 2021-07-02 13:27:11 发布

微醺-BW

最新推荐文章于 2021-07-02 13:27:11 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP 编程文章标签： javascript button function input

本文链接：https://blog.youkuaiyun.com/peng905/article/details/6698580

PHP 编程专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现图片轮播的方法。通过定义两个按钮和一个图片展示区，结合JavaScript控制图片的切换，实现了图片的向前和向后翻页功能。此方法适用于网页设计中需要展示多张图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type='button' value='上一张' onclick='getPrev()' />
<input type='button' value='下一张' onclick='getNext()' />
<div id='myArea'><img width='1366' height='768' src='./images/1.jpg' /></div>
<script>
var listArr = [
'./images/2.jpg',
'./images/3.jpg',
'./images/4.jpg',
'./images/5.jpg',
'./images/6.jpg',
'./images/7.jpg'
];

var currPic = 0;
function getPrev() {
var myArea = document.getElementByIdx_x('myArea');
currPic = currPic - 1;
if (currPic < 0) {
currPic = listArr.length - 1;
}
myArea.firstChild.src = listArr[currPic];
}

function getNext() {
var myArea = document.getElementByIdx_x('myArea');
currPic = currPic + 1;
if (currPic >= listArr.length) {
currPic = 0;
}
myArea.firstChild.src = listArr[currPic];
}
</script>