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">
jquery源码在线    <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
案例源码⽂件：
【猿2048】www.mk2048
更多专业前端知识，请上 【猿2048】www.mk2048

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。