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

JQuery实现点击按钮切换图片(附源码)--JQuery基础的更多相关文章

  1. JQuery移动动画实现点击按钮切换图片--JQuery基础

    直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...

  2. 原生js点击按钮切换图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. javascript总结36:DOM-点击按钮切换图片案例

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  4. JAVA Eclipse如何设置点击按钮切换图片

    右击图片文件夹,新建一个Android XML文件   设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...

  5. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  6. jQuery相册预览简单实现（附源码）

    1.CSS样式 <style type="text/css"> html,body,.viewer,.viewer .pic-list,.viewer .pic-lis ...

  7. Java：基于AOP的动态数据源切换（附源码）

    1 动态数据源的必要性 我们知道,物理服务机的CPU.内存.存储空间.连接数等资源都是有限的,某个时段大量连接同时执行操作,会导致数据库在处理上遇到性能瓶颈.而在复杂的互联网业务场景下,系统流量日益膨 ...

  8. jQuery带遮罩层弹窗实现（附源码）

    1.CSS样式 <style type="text/css"> body { font:11px/1.6em Microsoft Yahei; background:# ...

  9. cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

随机推荐

  1. 除了使用URLSearchParams处理axios发送的数据，但是兼容性不好，其他的兼容方法

    在使用axios这个ajax插件的时候,我们有些时候会遇到一些问题,比如:数据格式不正确 以最简单的例子为基础(这里使用post方法): 在上面的例子中我们直接调用axios的post方法,传给后台的 ...

  2. qt中的事件机制

    事件 1.QEvent -->类型 -> QKeyEvent QEvent::KeyRelease QEvent::MouseMove -> QMouseEvent 2.事件处理过程 ...

  3. UEditor工具栏上自定义按钮、图标、事件和右击菜单添加自定义按钮

    首先我要说是,举例说的这个版本是1.2以上的,因为一些配置代码转移到了zh-cn.js里,其他没有变化.开门见山直接写:(我自定义的是在线美图功能) 第一步:找到ueditor.config.js文件 ...

  4. 在 CentOS7.0 上搭建 Chroot 的 Bind DNS 服务器

    BIND(Berkeley internet Name Daemon)也叫做NAMED,是现今互联网上使用最为广泛的DNS 服务器程序.这篇文章将要讲述如何在 chroot 监牢中运行 BIND,这样 ...

  5. memcached 的实践操作

    memcached安装和使用   yum install -y libevent  memcached  libmemcached   启动命令:   /etc/init.d/memcached st ...

  6. 使用JSONP进行跨域Ajax 调用

    JSONP 是啥 JSONP 全称是JSON with Padding. 当需要进行跨域Ajax 调用的时候, 需要用到JSONP 协议. 客户端 $.ajax({ url: 'http://xxx' ...

  7. 新人学习selenium哪些资源比较有帮助？

    为什么学习selenium? selenium现在基本上成了页面自动化测试的标配,具体理由我在selenium 3.0发布这篇文章里已经说明过了.当一个东西成为标准以后,那么它的能量和潜力都是巨大的. ...

  8. python数据可视化学习1

    import matplotlib.pyplot as plt input_values = [1,2,3,4,5] #输入值 squares = [1,4,9,16,25] #输出值 plt.plo ...

  9. hihoCoder 1015 KMP算法

    题意:经典字符串匹配算法.给定原串和模式串,求模式串在原串中出现的次数.算法讲解 AC代码 #include <cstdio> #include <cmath> #includ ...

  10. hbase存储优化

    1.上面的2张图主要说明hbase的存储特点 (1).每个值(每条记录的每一个列的值)的存储,都完整的存储了rowkey.column family.column.版本(时间戳),以及该列的值. 这样 ...