jquery小例子--简单易懂的图片展示

最新推荐文章于 2018-05-09 22:05:29 发布
置顶 最新推荐文章于 2018-05-09 22:05:29 发布
阅读量1.9k 收藏
点赞数 2
分类专栏： 笔记 文章标签： jquery javascript 图片展示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011955534/article/details/16829387
版权
HTML代码： 
<body>
  	<div style="overflow:hidden;width:360px;height:225px;position:absolute;top:30px;" id="div">
		<div style="width: 360px; height: 900px; position: relative;" id="imgCon">
			<img src="img/1.jpg" id="img0"/>
			<img src="img/2.jpg" id="img1"/>
			<img src="img/3.jpg" id="img2"/>
			<img src="img/1a.jpg" id="img3"/>
			<img src="img/1.jpg"/>
		</div>
	</div>
	<div class="box" num="0" id="box0" style="color:red;">1</div>     
	<div class="box" num="1" id="box1">2</div>
	<div class="box" num="2" id="box2">3</div>
	<div class="box" num="3" id="box3">4</div>
  </body>
JS代码： 
<script type="text/javascript">
$(document).ready(function(){
  $("#box0").click(function(){
	//$("#imgCon").slideUp(4200);
	$("#imgCon").animate({top:'-225px'},"slow");
  });
  $("#box1").click(function(){
  $("#imgCon").animate({top:'-450px'},"slow");
  });
  $("#box2").click(function(){
  $("#imgCon").animate({top:'-675px'},"slow");
  });
  $("#box3").click(function(){
  $("#imgCon").animate({top:'-900px'},"slow");
  });
});
</script>

CSS：代码：

<style type="text/css">
	.box{
		width:40px;
		height:20px;
		border:1px solid #000;
		float:left;
		cursor:pointer;
	}
	#imgCon img{
		display:block;
		padding:0;
		margin:0;
		width:360px;
		height:225px;
	}
	</style>


u011955534
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery图片操作的例子
Java技术
07-13 354
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"><...
Jquery——简单例子
Zjaun的博客
02-13 2168
制作简易版jquery插件 &amp;lt;script src=&quot;jquery.bgColor.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script&amp;gt; $(function () { $(&quot;div&quot;).bgColor(&quot;red&quot;).width(400); }); &amp;lt;/sc
自动部署　web ui 操作
07-04 305
自动部署　web ui 操作 #!/usr/bin/env python#encoding=utf-8from bottle import route, run,redirect,request,template,responseimport osimport th...
JQuery-样式篇
wust_cyl的博客
05-09 1450
内容来自慕课网：点击打开链接     巩固基础知识还是很有用的jQuery对象与DOM对象对于才开始接触jQuery库的初学者，我们需要清楚认识一点：jQuery对象与DOM对象是不一样的可能一时半会分不清楚哪些是jQuery对象，哪些是DOM对象，下面重点介绍一下jQuery对象，以及两者相互间的转换。通过一个简单的例子，简单区分下jQuery对象与DOM对象：&lt;p id=”imooc”&...
jquery实现简单易懂的图片展示小例子
10-26
标题中的“jquery实现简单易懂的图片展示小例子”指的是使用jQuery库来创建一个直观的图片轮播功能。这个例子适合初学者理解jQuery的基本用法和动态效果的实现。 描述中提到，这是一个大家常见的图片展示功能，特点...
jquery.jqprint-0.3.rar
08-14
下面是一个简单的示例，展示如何使用jqPrint插件打印一个包含文本和图片的div： ```html <!DOCTYPE html> <meta charset="UTF-8"> <title>jqPrint示例 <script src="https://code.jquery....
jquery 简单的图片展示效果
12-04
在本文中，我们将探讨如何使用jQuery实现一个简单的图片展示效果。这个效果主要涉及CSS样式布局和jQuery事件处理，以创建一个美观且交互式的图片轮播功能。以下是对标题和描述中提到的知识点的详细说明： 1. **...
jquery.jqprint-0.3.js的使用demo.zip
最新发布
12-22
使用jQuery.jqprint-0.3.js非常简单，主要通过调用$.fn.jqPrint()方法实现。以下是一个基本的使用示例： ```javascript $(document).ready(function(){ $("#printElement").click(function(){ $("#printArea")....
jQuery配合coin-slider插件制作幻灯片效果的流程解析
10-22
在这个例子中，`<a>`标签用于设置点击图片后跳转的链接，`<img>`标签则包含实际的图片源，`<span>`标签内的文本会作为图片的描述显示。 为了使coin-slider工作，还需要在jQuery代码中初始化这个插件。通常，这会在...
oracle常用函数详解（详细）
热门推荐
每天多一点
11-05 5万+
Oracle SQL 提供了用于执行特定操作的专用函数。这些函数大大增强了 SQL 语言的功能。函数可以接受零个或者多个输入参数，并返回一个输出结果。 Oracle 数据库中主要使用两种类型的函数： 1.  单行函数：对每一个函数应用在表的记录中时，只能输入一行结果，返回一个结果， 比如：MOD(x,y)返回 x 除以 y 的余数（x 和 y 可以是两个整数，也可以是表中的整 数列）。常用的
oracle存储过程之数据增删查改及调用
每天多一点
11-09 1万+
存储过程： 存储过程是 SQL, PL/SQL, Java 语句的组合， 它使你能将执行商业规则的代码从你的应用程序中移动到数据库。这样的结果就是，代码存储一次但是能够被多个程序使用。是存放在数据库服务器上的SQL语句块，其效率高于同等SQL语句6-10倍 一、Oracle存储过程语法： Create [or replace] procedure 存储过程名称 (输入参数或输出参数)]as
oracle数据库基础知识学习笔记
每天多一点
11-04 1万+
一、SQL语言分类： 1.DDL（数据定义语言）：  create（创建）    alter（修改）  drop（删除）------------主要是对表操作。   2.DML（数据操作语言）：  insert(插入)    delete(删除)  update(更新)  select(查询) 、select......for update(查询更新)----表中数据进行操作  
Jquery动态给表格添加、删除行
每天多一点
11-18 1万+
HTML代码 test1 test2 JS代码 $(document).ready(function(){ $("#btn1").click(function(){ var tr = "new"; $("table").append(tr);/
ORACLE序列（字段自增长）
每天多一点
11-09 9663
学过SQL SERVER的都知道，SQL SERVER中通过identity关键字，让某一字段自增长。那么在Oracle中如何让字段自增长呢？--------序列 序列: 是oacle提供的用于产生一系列唯一数字的数据库对象。 Ø 自动提供唯一的数值 Ø 共享对象 Ø 主要用于提供主键值 Ø 将序列值装入内存可以提高访问效率 创建序列： 1、  要有创建序列的权限 create se
oracle子查询
每天多一点
11-04 6148
子查询：当一个查询的结果时另一个查询的条件时，即嵌入在其它SQL语句中的select语句，也成为嵌套查询。   子查询可以返回单行结果，可以返回多行结果，也可以不返回结果   使用子查询注意事项： 1、子查询可以嵌套多层 2、子查询需要圆括号（）括起来 3、当在DDL语句中引用子查询时，可以带有order  by语句，但当在where子句中，set子句中引用子查询时，不能带有orde
AJAX解析json之 下拉框 二级联动
每天多一点
11-14 5188
这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析json文件得到的数据传回到jsp页面，其中省市均是从数据库取到的值： jsp页面： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getSer
Jquery中DOM操作（详细）
每天多一点
11-17 3866
Jquery中的DOM操作 为了能全面的讲解DOM操作，首先需要构建一个网页。 HTML代码： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
AJAX解析XML实例之下拉框二级联动
每天多一点
11-14 1945
这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面，其中省市均是从数据库取到的值： jsp页面代码： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getSe
jQuery插件实践：创建图片hover效果
总结来说，这个资源提供了一个简单的jQuery图片hover插件的实例，通过它，你可以学习到如何编写jQuery插件，理解`$.fn`、`$.extend`等关键API的使用，以及如何利用jQuery处理DOM元素和动画效果。同时，它也是一个很...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值