JS点击更换图片
<!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>
<script>
window.onload = function() {
var bj = document.getElementById("bj") //要处理的图片
var syg = document.getElementById("syg") //点击上一个
var xyg = document.getElementById("xyg") //点击下一个
sz = 1 //初始化图片为第一张
xyg.onclick = function() { //下一张点击事件
if (sz == 4) {
sz = 1 //如果数字等于四则重置
} else {
sz++ //sz=sz+1
}
bj.src = +sz + ".jpg" //更换图片
}
var syg = document.getElementById("syg") //上一个
syg.onclick = function() { //上一张点击事件
if (sz == 1) {
sz = 4 //如果数字等于四则初始化他
} else {
sz-- //sz=sz+1
}
bj.src = +sz + ".jpg" //更换图片 //更换图片
}
}
</script>
<style>
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<p id="syg">上一张</p>
<p id="xyg">下一张</p>
<img src="1.jpg" id="bj" alt="背景图">
<!--要更换的图片-->
</div>
</body>
</html>
数组形式:
function RotationChart() {
var pic = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']; //图片位置
var num = 0;
// console.log(pic.length)
var img = document.querySelector('#img'); //查询图片
var xyg = document.querySelector('#xyg'); //下一个
var syg = document.querySelector('#syg'); //上一个
//console.log(xyg)
xyg.onclick = function() {
num++;
if (num == pic.length) {
num = 0;
}
img.src = pic[num];
}
syg.onclick = function() {
num--;
if (num < 0) {
num = pic.length - 1;
}
img.src = pic[num];
}
}
需要使用时直接调用函数RotationChart()即可
本文作者:小小孩子们
转载请注明原文地址
本文地址https://xxhzm.cn/index.php/archives/3/
3 条评论
不错
不错
OωO