第二：可以用jquery来替换图片的src地址，每次点击就替换几个图片的src地址就行了
第三：用jQuery+ajax去获取图片，点击后发送ajax请求，返回下一次要显示的图片
方法一：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function () {
$('button').click(function () {
$(this).siblings('span').css('display','none')
$(this).next().css('display','inline-block')
})
})
</script>
<style>
span {
display: none
}
</style>
</head>
<body>
<div>
<button type="button">按钮一</button>
<span>图片一</span>
<button type="button">按钮二</button>
<span>图片二</span>
<button type="button">按钮三</button>
<span>图片三</span>
<button type="button">按钮四</button>
<span>图片四</span>
</div>
</body>
</html>
方法二：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function () {
$('button').each(function (index) {
$(this).attr('index',index)
$('span').eq(index).attr('index',index)
$(this).click(function () {
$('span').hide()
if ($(this).attr('index') === $('span').eq(index).attr('index')) {
$('span').eq(index).css('display','inline-block')
}
})
})
})
</script>
<style>
span {
display: none
}
</style>
</head>
<body>
<div>
<button type="button">按钮一</button>
<button type="button">按钮二</button>
<button type="button">按钮三</button>
<button type="button">按钮四</button>
</div>
<div>
<span>图片一</span>
<span>图片二</span>
<span>图片三</span>
<span>图片四</span>
</div>
</body>
</html>
方法有很多，主要看你如何布局吧
添加删除是一项基本功能，下面就来看一下jquery怎么在图片上添加删除按钮。
设备：联想电脑
系统：xp
软件：jQuery2019
1、首先写一个HTML架构，如图所示代码。
2、新建一个div，div中包裹着一个img标签，视为图片。
3、再次书写一个div，之后会赋予点击事件。
4、然后使用onclick函数进行点击时间的绑定，如图所示。
5、引入jquery.js，之后使用其中的函数。
6、最后编写addButton方法，这样一切就完成了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）