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

更多专业前端知识，请上【猿2048】www.mk2048.com

JQuery实现点击按钮切换图片(附源码)--JQuery基础相关推荐

Android 点击按钮切换图片
Android 点击按钮切换图片效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
java幻灯片效果_Java实现多种幻灯片切换特效(附源码)
Java实现多种幻灯片切换特效(附源码)以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 功能说明代码实现了多种幻灯片变 ...
JQuery实现灯泡开关【文末附源码】
JQuery实现灯泡开关[文末附源码]
vue点击按钮怎么跳转图片_Vue中点击按钮切换图片;
页面效果比较差,但是有图总比没图强点这是最开始的页面,我们看到,图中只有一个"右箭头",点击右箭头; 左箭头也有了,然后我们继续点击右箭头; 右箭头没有了,只剩下了左箭头, 以上 ...
用易语言制作一款图文展示软件，点击按钮切换图片和文字说明，易语言按钮、图片框、编辑框的应用
在如今这个商业社会,产品宣传至关重要,尤其是向目标客户发送产品相册,非常有利于促进更多商品的交易.用易语言制作一款图文同时展示的小软件,通过网络发送给客户,客户很方便了解产品详情,从而提升客户体验.此 ...
python 实现模拟鼠标点击器可运行附源码
工具下载链接(网盘) https://pan.baidu.com/s/1GIZPHQnRQqTD5h1Cy70MNQ?pwd=kxzz 一.前言: 对于一些比较肝的游戏,想要使用工具挂机: 对于一些购 ...
Android开发之使用TabLayout快速实现选项卡切换功能(附源码下载)
看下效果图: 先看下布局: TabLayout的简单使用: 当选项卡过少时候设置填充全屏app:tabGravity="fill"设置下面切换选项卡的小滑片颜色app:tabInd ...

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;

}

2、Effect Picture

案例源码文件：JQuery实现点击按钮切换图片.zip

JQuery实现点击按钮切换图片(附源码)--JQuery基础相关推荐

最新文章

热门文章

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;

}

2、Effect Picture

案例源码文件：JQuery实现点击按钮切换图片.zip

JQuery实现点击按钮切换图片(附源码)--JQuery基础相关推荐

最新文章

热门文章

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title>JQuery实现点击按钮切换图片</title>
　　<style type="text/css">
　　*{
　　　　margin:0;
　　　　padding:0;

　　}