JQuery实现点击按钮切换图片(附源码)--JQuery基础
Posted Thanlon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery实现点击按钮切换图片(附源码)--JQuery基础相关的知识，希望对你有一定的参考价值。
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
以上是关于JQuery实现点击按钮切换图片(附源码)--JQuery基础的主要内容，如果未能解决你的问题，请参考以下文章