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

时间:2023-11-26 13:45:14

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="data: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实现点击按钮切换图片.zip