采用html，给页面添加元素，让其中的一个元素隐藏,只显示其中的一张图片，然后给span 标签添加 点击事件，当点击下一张的时候，照片可以自由切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片点击事件</title>
<script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
img{
height:300px;
border-radius:100px;
box-shadow:10px 10px 5px #888;
}
.hide{
display:none;
}
</style>
<head>
<body>
<div >
<img width="200"src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1513840832&di=edd0a61f0f310bb3b1088815c6883389&src=http://img4.duitang.com/uploads/item/201412/13/20141213223055_We2Sj.jpeg">
<span onclick="show(this)" >下一张</span>
</div>
<div><img width="200" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513850938081&di=43b66a81481a6a3d95b22e7b863e802a&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201411%2F06%2F20141106232427_YBkjN.thumb.700_0.jpeg">
<span onclick="show(this)">下一张</span>
</div>
</body>
<script>
function show(self){
$(self).parent()//获得span标签的父元素即div
.addClass('hide')//给当前操作的div添加隐藏事件
.siblings()//选择当前div的兄弟元素
.removeClass('hide')//给当前操作的div的兄弟标签的隐藏事件移除
}
</script>
</html>