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. DirectSound---简易Wav播放器

    这篇文章主要给大家介绍下如何用DirectSound打造一个简易播放器,因为篇幅有限且代码逻辑较为复杂,我们只介绍下核心技术内容.该播放器主要包括以下功能: 播放.暂停 播放进度提示. 1. Dire ...

  2. Material使用11 核心模块和共享模块、 如何使用@angular/material

    1 创建项目 1.1 版本说明 1.2 创建模块 1.2.1 核心模块 该模块只加载一次,主要存放一些核心的组件及服务 ng g m core 1.2.1.1 创建一些核心组件 页眉组件:header ...

  3. Java中从控制台输入数据的几种常用方法（转）

    一.使用标准输入串System.in  //System.in.read()一次只读入一个字节数据,而我们通常要取得一个字符串或一组数字  //System.in.read()返回一个整数  //必须 ...

  4. Maven编译问题

    Maven构建的Project默认使用JDK1.5进行编译,要想使用JDK1.8进行编译,最好在项目的POM文件中加上以下的字段. <build> <plugins> < ...

  5. cloud9 ide

    https://github.com/tekacs/cloud9 http://www.pjhome.net/article/Javascript/nodeJS_IDE_cloud9.html htt ...

  6. 使用域账号统一管理cisco网络设备

    1.思科设备和微软系统整合的背景: 公司内部有一定数量的客户端,为了实现统一化,在管理内部部署了域架构,这样可以通过组策略对客户端进行批量化管理,提高了管理的效率. 同样公司内部有一定数量的网络设备( ...

  7. WinServer2012 R2忘记密码的解决方案+远程连接另一种莫名其妙故障

    http://www.cnblogs.com/dunitian/p/4822808.html#iis 之前朋友有问道我WinServer2003密码破解的事情,基本上密码忘记了都是进PE用密码清除的工 ...

  8. MSSql Server 批量插入数据优化

    针对批量入库, .Net Framework  提供了一个批量入库Class : SqlBulkCopy , 批量入库性能不错,经测试 四万左右数据 2秒入库. 以下是测试Demo , 使用外部传入事 ...

  9. HTML5VEDIO标签阿里云-微信浏览器兼容性问题

    在网页展示媒体对象,离不开HTML5的 audio和video对象.但这两个目前来看兼容性方面还得关注一下. 目前在做一个阿里云下载video 并在微信端播放mp4格式的视频的时候,碰到了一些兼容性问 ...

  10. 怎样才能收集到所有开发人员的blog(待续…)

    第一个问题,如何找到尽可能多的博客地址? 1. 找到一个知名blog, 遍历这个博客的外链. 2. 遍历找到的外链,并以同样逻辑找到其他博客. 3. 如果遍历到的博客地址已经存在则停止遍历. 还有一种 ...