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实现点击按钮切换图片.zip
更多专业前端知识，请上 【猿2048】www.mk2048.com
扫一扫
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
