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. C# 简单内存补丁

    写在开头:看了一些视频教程,感觉OD为什么别人学个破解那么容易,我就那么难了呢,可能是没有那么多时间吧. 解释:个人见解:所谓内存补丁,即:通过修改运行程序的内容,来达到某种目的的操作.修改使用Ope ...

  2. VScode离线安装插件

    VScode离线插件的转移 需求:换台电脑用VScode 找到插件安装路径 在本地找.vscode的文件夹,里面的extensions文件夹里都是下载的插件 复制发给其他电脑 在vscode首选项-- ...

  3. Scrapy框架实战-妹子图爬虫

    Scrapy这个成熟的爬虫框架,用起来之后发现并没有想象中的那么难.即便是在一些小型的项目上,用scrapy甚至比用requests.urllib.urllib2更方便,简单,效率也更高.废话不多说, ...

  4. 二、urllib进阶

    Handler处理器 和 自定义Opener opener是 urllib.request.OpenerDirector 的实例,我们之前一直都在使用的urlopen,它是一个特殊的opener(也就 ...

  5. qt安装--this Qt version uses an unsupported makefile

    解决办法: Run regedit. Hop to HKEY_CURRENT_USER\Software\Trolltech\Versions或HKEY_CURRENT_USER\Software\D ...

  6. yii2 源码分析 model类分析 （五）

    模型类是数据模型的基类.此类继承了组件类,实现了3个接口 先介绍一下模型类前面的大量注释说了什么: * 模型类是数据模型的基类.此类继承了组件类,实现了3个接口 * 实现了IteratorAggreg ...

  7. mysqldump 备份导出数据排除某张表

    就用 --ignore-table=dbname.tablename参数就行,可以忽略多个. /usr/bin/mysqldump -- -uroot -p123456 dbname --ignore ...

  8. 用最简单的例子实现jQuery图片即时上传

    [http://www.cnblogs.com/Zjmainstay/archive/2012/08/09/jQuery_upload_image.html] 最近看了一些jQuery即时上传的插件, ...

  9. 某控股公司OA系统ORACLE DG搭建

    *此处安装ORACLE DATAGUARD是利用ORACLE RMAN DUPLICATE方式安装.*可以搭建好ORACLE DG再来impdp生产数据,也可以先导入主库数据再来做DG*注意看下面的配 ...

  10. CSS布局(四) float详解

    一.float设计初衷 因为float被设计出来的初衷是用于--文字环绕效果.即,一个图片一段文字,图片float:left之后,文字会环绕图片. <div style="width: ...