用js中的定时器实现两个按钮控制两张图片,点击左侧按钮,第一张图往右走,点击右侧按钮,第二张图往左走
时间: 2023-08-29 20:04:22 浏览: 39
首先,在 HTML 中添加两张图片和两个按钮:
```html
<img id="img1" src="img1.jpg">
<img id="img2" src="img2.jpg">
<button id="left-btn">Left</button>
<button id="right-btn">Right</button>
```
然后,在 JS 中添加定时器和按钮点击事件:
```javascript
// 获取图片和按钮元素
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var leftBtn = document.getElementById("left-btn");
var rightBtn = document.getElementById("right-btn");
// 定义图片位置变量
var img1Position = 0;
var img2Position = 0;
// 点击左侧按钮,第一张图往右走
leftBtn.onclick = function() {
// 每隔10毫秒改变第一张图片的位置,并更新变量
var img1Interval = setInterval(function() {
img1Position += 1;
img1.style.left = img1Position + "px";
if (img1Position >= 200) {
clearInterval(img1Interval);
}
}, 10);
};
// 点击右侧按钮,第二张图往左走
rightBtn.onclick = function() {
// 每隔10毫秒改变第二张图片的位置,并更新变量
var img2Interval = setInterval(function() {
img2Position -= 1;
img2.style.left = img2Position + "px";
if (img2Position <= -200) {
clearInterval(img2Interval);
}
}, 10);
};
```
在 CSS 中,为图片添加样式,使其定位在页面的左边和右边:
```css
img {
position: absolute;
top: 100px;
}
#img1 {
left: 0px;
}
#img2 {
right: 0px;
}
```
这样,当点击左侧按钮时,第一张图片会向右移动,直到移动到 200px 的位置;点击右侧按钮时,第二张图片会向左移动,直到移动到 -200px 的位置。