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. 读论文系列：Object Detection SPP-net

    本文为您解读SPP-net: Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition Motivat ...

  2. Linux 编译安装 php 扩展包 curl

    php源码目录:/root/php php编译目录:/usr/local/webserver/php/ curl源码目录:/root/curl 1.curl,主要用于发送http请求,是php的一个扩 ...

  3. IntelliJ IDEA（八） ：git的使用

    项目管理离不开版本控制,目前主流版本控制工具大概就是SVN和Git,至于两者有啥区别这里就不详细介绍了,如果有不明白的可以上网查资料,后期如果有机会我再开篇栏目细说,而且现在市场上Git的使用率已经远 ...

  4. java-redis初探

    一.Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的 ...

  5. Spring mvc学习指南

    使用flash attribute(闪存传值) 在配置文件中添加<mvc:annotion-driven/> 在controller方法参数里面添加RedirectAttributes r ...

  6. Linux（ubuntu）安装redis集群，redis集群搭建

    今天学习一下redis集群的搭建.redis在现在是很常用的数据库,在nosql数据库中也是非常好用的,接下来我们搭建一下redis的集群. 一.准备 首先我们要安装c语言的编译环境,我们要安装red ...

  7. 地牢逃脱 (BFS)

    题意:给定一个 n 行 m 列的地牢,其中 '.' 表示可以通行的位置,'X' 表示不可通行的障碍,牛牛从 (x0 , y0 ) 位置出发,遍历这个地牢,和一般的游戏所不同的是,他每一步只能按照一些指 ...

  8. Docker mongodb 3.4 分片 一主 一副 一仲 鉴权集群部署.

    非docker部署 为了避免过分冗余,并且在主节点挂了,还能顺利自动提升,所以加入仲裁节点 为什么要用docker部署,因为之前直接在虚拟机启动10个mongod 进程.多线程并发测试的时候,mong ...

  9. Activity的生命周期& 启动模式

    1.Activity的生命周期 生命周期这个事情,是android工程师最基础的知识,所以今天要讲的是一些不一样的东西. 1.1 OnStart,OnResume,OnPause,OnStop 他们的 ...

  10. Luogu P1877 [HAOI2012]音量调节

    题目描述 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都需要改变一次音量.在演出开始之前,他已经做好一个列表,里面写着每首歌开始之前他想要改变的音量是多少. ...