JQuery实现切换图片相对比较简单，直接贴代码了哈，有注释噢！疑问请追加评论哈，不足之处还请大佬们指出！

1、案例代码：

demo.html：

<!DOCTYPE html>
<html>
<head>
	　　<meta charset="utf-8">
	　　<title>JQuery实现点击按钮切换图片</title>
	　　<style type="text/css">
		　　*{
			　　　　margin:0;
　　　　padding:0;　　}
		.box{
			　　text-align: center;/*将box里的内容居中显示*/
		　　}
		.btn{
			　　display: inline-blocki;/*让a标签变成行内块级元素*/
			　　height: 30px;
			　　line-height: 30px;
			　　border:1px solid #ccc;
			　　text-decoration: none;
			　　color: #333;
			　　padding:  5px;
			　　font-size: 12px;
		}
		.btn:active{
			　　background-color: #666;
			　　color: white;
		}
	</style>
</head>
<body>
　　<div class="box">
	　　　　<img src="images/1.jpg" alt="pic" id="img">
	　　　　<p>
		　　　　　　<a href="javascript:;" class="btn" data-control="last">上一页</a>
		　　　　　　<a href="javascript:;" class="btn" data-control="next">下一页</a>
	　　　　</p>
　　</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	　　var imgs = [//定义数组用来存储图片的路径
	　　'images/1.jpg',
	　　'images/2.jpg',
	　　'images/3.jpg',
	　　'images/4.jpg',
	　　'images/5.jpg',
	　　'images/6.jpg'
	　　];
	　　var index = 0;//设置第一张图片的索引值为0
	　　var len = imgs.length;//获取存储图片数组的长度
	　　$('.btn').on('click',function(){//绑定点击事件
		　　　　if($(this).data('control') === "last"){
		　　　　//如果写成 $(this).data('control') === 'last'是对的
		　　　　//如果写成 $(this).data('control') = 'last'那就始终为真了，没意义
		　　　　//如果写成 'last' === $(this).data('control')是对的
		　　　　//如果写成 'last' = $(this).data('control')语句就会报一个错误
		　　　　// index--;
		　　　　// if(index<0){
		　　　　// 	index = 0;
		　　　　// }
		　　　　// index--;
			　　　　　　index = Math.max(0,--index);//如果index的值小于0，使index为0
		　　　　}else 
		　　　　　　index = Math.min(len-1,++index);//如果index大于了数组长度 ，使index等于数组长度减一的值
		　　　　　　document.title = (index+1)+'/'+len;//改变标题内容
		　　　　　　$('#img').attr('src',imgs[index]);//动态改变图片的路径
	　　});
</script>
</body>
</html>

2、Effect Picture

 

jquery点击切换图片 jquery点击按钮切换图片_JQuery