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" ></html>

2、Effect Picture

 JQuery实现点击按钮切换图片(附源码)--JQuery基础

案例源码文件:JQuery实现点击按钮切换图片.zip