JQuery实现点击按钮切换图片(附源码)--JQuery基础
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基础的更多相关文章
- JQuery移动动画实现点击按钮切换图片--JQuery基础
直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...
- 原生js点击按钮切换图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- javascript总结36:DOM-点击按钮切换图片案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- JAVA Eclipse如何设置点击按钮切换图片
右击图片文件夹,新建一个Android XML文件 设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- jQuery相册预览简单实现（附源码）
1.CSS样式 <style type="text/css"> html,body,.viewer,.viewer .pic-list,.viewer .pic-lis ...
- Java：基于AOP的动态数据源切换（附源码）
1 动态数据源的必要性 我们知道,物理服务机的CPU.内存.存储空间.连接数等资源都是有限的,某个时段大量连接同时执行操作,会导致数据库在处理上遇到性能瓶颈.而在复杂的互联网业务场景下,系统流量日益膨 ...
- jQuery带遮罩层弹窗实现（附源码）
1.CSS样式 <style type="text/css"> body { font:11px/1.6em Microsoft Yahei; background:# ...
- cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
随机推荐
- python3图像识别库安装与使用
pytesseract库的安装 因为用的win10,就直说windows上面的安装了.其实就是pip安装就完事了. $ pip install pytesseract 安装了这个还不算完,得安装Tes ...
- 通过四个例子理解JavaScript拓展运算符
原文地址:JavaScript & The spread operator 拓展运算符看起来像什么? 三个点,... 它能做什么? 拓展运算符允许一个表达式在某个地方展开成为多个元素.变量或参 ...
- [Python Study Notes]实现对键盘控制与监控
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- Docker安装Nginx1.11.10+php7+MySQL
Docker安装php-fpm 1.编辑Dockerfile FROM php:7.1.3-fpm ADD sources.list /etc/apt/sources.list RUN cp /usr ...
- 输入docker ps 报错信息处理Get http:///var/run/docker.sock/v1.19/containers/json: dial unix /var/run/docker.sock: permission denied.
完整错误信息 Get http:///var/run/docker.sock/v1.19/containers/json: dial unix /var/run/docker.sock: permis ...
- OSI网络模型
OSI中的层 功能 TCP/IP协议族 应用层 文件传输,电子邮件,文件服务,虚拟终端 TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet 表示层 数 ...
- Egret学习笔记 (Egret打飞机-8.敌机和主角飞机发射子弹)
经过前面几章的准备,我们差不多已经具备了一个基本的框架,这一章我们就开始添砖加瓦了. 敌机定时发射一个子弹,子弹的方向是从上到下,但是发射子弹的代码应该放在哪儿呢? 从面向对象编程的思想来说,子弹是敌 ...
- Jquery就是这么简单
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...
- Qt 如何使用 QImage 设置指定的颜色为透明色？
Qt 如何使用 QImage 设置指定的颜色为透明色? 需求背景:使用华大身份证读卡器模块读取身份证信息,通过模块读取的图片为 *.BMP 格式,无透明色,故绘制到身份证上无法美观的显示. 通过查询身 ...
- acdrem1083 人民城管爱人民 DP
思路:d(i, 0)表示从节点i到达大运村的最短路径,d(i, 1)表示从节点i到达大运村的次短路径. 1.最短路:当做DAG处理即可. 2.次短路:假设当前在u点处,下一个节点是v.v到终点的最短路 ...