Jquery学习笔记三

最新推荐文章于 2025-02-25 09:51:17 发布
最新推荐文章于 2025-02-25 09:51:17 发布 · 123 阅读 · 0
文章标签：

#jQuery #CSS #HTML #ViewUI

本文介绍了一个基于JQuery的动画轮播图实现案例，包括如何通过动画切换不同的图片版面，以及如何处理翻页逻辑，确保用户可以流畅地浏览不同版面的内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天做了个例子，是基于事件和动画的。一个网页上有几个版面，每个版面有4张动画图片，当点击下一页的时候，跳到下一个版面，点击上一页的时候跳到上一个版面。如果在第一个版面，点击上一页，直接跳转到最后一个版面，如果是在最后一页，直接跳转到第一个版面。
好了，先做一个初始化页面，页面代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/animation.css" type="text/css">
		<style type="text/css">

		</style>
        <script type="text/javascript" src="js/jquery-1.3.1.js">
        </script>
        <script type="text/javascript">
        </script>
        <title>Jquery Animation Test</title>
    </head>
    <body>
    <div class="v_show">
	<div class="v_caption">
		<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
		<div class="highlight_tip">
			<span class="current">1</span><span>2</span><span>3</span><span>4</span>
		</div>
		<div class="change_btn">
			<span class="prev" >上一页</span>
			<span class="next">下一页</span>
		</div>
		<em><a href="#">更多>></a></em>
	</div>
	<div class="v_content">
		<div  class="v_content_list">
			<ul>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
		     </ul>
		</div>
	</div>
</div>	
    </body>
</html>

这是初始化的页面，然后我加入css和图片，效果如下

[img]http://dl.iteye.com/upload/attachment/284286/09311c80-af95-3714-bbef-88b559d7c032.jpg[/img]
现在我知道了每个版面是4个图片，那么我要计算它的版面共有多少个了，设定初始化版面1，除以4就是它的版面数，如果是基数，则版面数要加1。同样，还要得到区域内容，就是版面内容的宽度。现在先做下一页的例子，一页一页向下翻。加上Jquery后的代码如下，有注释

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/animation.css" type="text/css">
		<style type="text/css">

		</style>
        <script type="text/javascript" src="js/jquery-1.3.1.js">
        </script>
        <script type="text/javascript">
         	$(function() {
				var page = 1;
				var i = 4;
				$("span.next").click(function() { //绑定click事件
					var $parent = $(this).parents("div.v_show"); //根据当前单击的元素找到父元素
					var $v_show = $parent.find("div.v_content_list"); //找到"视频内容展示区域"
					var $v_content = $parent.find("div.v_content"); //找到"视频内容展示区域"外围的div
					var v_width = $v_content.width();
					var len = $v_show.find("li").length; //总的视频图片数
					var page_count = Math.ceil(len / i); //只要不是整数，就往大的方向取最小的整数
					if(!$v_show.is(":animated")) { //判断"视频内容展示区域"是否正在处于动画
						if(page == page_count) { //已经到最后一个版面了，如果再向后，就必须跳转到第一个版面
							$v_show.animate({left:"0px"}, "slow"); //通过改变left的值，跳转到第一个版面
							page = 1;
						}else {
							$v_show.animate({left:'-='+v_width}, "slow"); //改变left的值，达到每次换一个版面
							page ++;
						}
					}

					$parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");

				});
		})
        </script>
        <title>Jquery Animation Test</title>
    </head>
    <body>
    <div class="v_show">
	<div class="v_caption">
		<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
		<div class="highlight_tip">
			<span class="current">1</span><span>2</span><span>3</span><span>4</span>
		</div>
		<div class="change_btn">
			<span class="prev" >上一页</span>
			<span class="next">下一页</span>
		</div>
		<em><a href="#">更多>></a></em>
	</div>
	<div class="v_content">
		<div  class="v_content_list">
			<ul>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
		     </ul>
		</div>
	</div>
</div>	
    </body>
</html>


同理，如果是上一页的话，那么只需要加上这段代码就ok了

if(page == 1) { //已经到第一个版面了，如果再向前，必须跳转到最后一个版面
							$v_show.animate({left:'-='+v_width*(page_count - 1)}, "slow");
							page = page_count;
						}else {
							$v_show.animate({left:'+='+v_width}, "slow");
							page --;
						}

好了，下面是做好后的效果，当我点击下一页时，图片如下

[img]http://dl.iteye.com/upload/attachment/284290/b04eddd6-a8a5-3203-b9ab-4167b0f9948f.jpg[/img]
当到最后一页，如下

[img]http://dl.iteye.com/upload/attachment/284292/3b8e50ab-f5e1-3f75-8771-2c9789513d22.jpg[/img]
再点击下一页时候，就回到了第一个页面，如下

[img]http://dl.iteye.com/upload/attachment/284296/a4ddaec6-cb16-3d0e-82cf-8af68f9bd898.jpg[/img]
好了，全部搞定。
jQuery 学习笔记
Dshuai7191的博客
08-26 464
演示通过 animate() 方法预定义 "hide", "show", "toggle" 值。演示更多 jQuery animate() 方法实例 (多个 animate() 回调).jQuery toggle() 用于切换 hide() 和 show() 方法。使用jQuery text() 和 html() 方法获取内容。演示 jQuery focus() 和 blur() 事件。演示jQuery hide() 和 show() 方法。演示简单的 jQuery animate() 方法。...
Jquery学习笔记（1）
qq_51861704的博客
05-15 325
Jquery主要内容 1：Jquery对象 Jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以...
jQuery学习笔记1
2301_80318725的博客
02-25 263
- jquery是js的一个库，代码量没有那么冗余，先学jQuery基础的引入，然后动画，最后Ajax学一点，最后可以去书本目录上总结大纲，没有js那么难，学习压力一定会比较小。先敲代码，然后写案例+讲题 -->-- jquery是js的一个库，代码量没有那么冗余，简洁、快速、轻量级 -->-- 这学期用jQuery3.6的版本 -->-- 1.下载和引入jQuery：jQuery CDN的网址【https://releases.jquery.com/】（1）代码直接引入：<script。
JQuery学习笔记
热爱编程、热爱生活、热爱探索
08-21 1420
万字详解带你快速了解并上手JQuery，同时文中还参杂一些使用JQuery的经验，帮助你提前避坑
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 1250
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1534
本文主要介绍有关jQuery的相关知识点
jQuery学习笔记(1)
2301_76379381的博客
04-19 494
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。**
jQuery的学习笔记
qi_bai_jin的博客
11-06 1982
jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
jQuery学习笔记总结
早安，朝气蓬勃的你
05-13 1903
jQuery 1、jQuery下载：https://www.jq22.com/jquery-info122#google_vignette 基本使用：下载解压jar包（备用），IDEA或eclipse构建一个工程，把jQuery文件复制到工程目录下。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnAZpDhU-1652445213644)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20220
jQuery学习笔记三
ysicc2010的博客
08-28 107
jQuery 遍历 jQuery 遍历 - 祖先 parent()// 返回所选元素的直接父元素 parents()// 返回被选元素的所有祖先元素 parentsUntil() $("span").parentsUntil("div");// 返回介于span与div之间的所有祖先元素 不包括div jQuery 遍历 - 后代 children()// 返回直接子元素 $...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
锋利的JQuery学习笔记.pdf
08-14
锋利的JQuery学习笔记
jQuery学习笔记（一）
07-13
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
jQuery学习笔记 获取jQuery对象
01-21
使用jQuery选择器选择页面元素，目的是为了生成jQuery对象，语法相当简单：$(selector)。但值得注意的是，这是生成jQuery对象，不是DOM对象，因此$(selector)[removed]以获取元素内部HTML代码是错误的，正确写法是$...
基于QT的调色板
08-15
【基于QT的调色板】是一个使用Qt框架开发的色彩选择工具，类似于Windows操作系统中常见的颜色选取器。Qt是一个跨平台的应用程序开发框架，广泛应用于桌面、移动和嵌入式设备，支持C++和QML语言。这个调色板功能提供了横竖两种渐变模式，用户可以方便地选取所需的颜色值。 在Qt中，调色板（QPalette）是一个关键的类，用于管理应用程序的视觉样式。QPalette包含了一系列的颜色角色，如背景色、前景色、文本色、高亮色等，这些颜色可以根据用户的系统设置或应用程序的需求进行定制。通过自定义QPalette，开发者可以创建具有独特视觉风格的应用程序。 该调色板功能可能使用了QColorDialog，这是一个标准的Qt对话框，允许用户选择颜色。QColorDialog提供了一种简单的方式来获取用户的颜色选择，通常包括一个调色板界面，用户可以通过滑动或点击来选择RGB、HSV或其他色彩模型中的颜色。 横渐变取色可能通过QGradient实现，QGradient允许开发者创建线性或径向的色彩渐变。线性渐变（QLinearGradient）沿直线从一个点到另一个点过渡颜色，而径向渐变（QRadialGradient）则以圆心为中心向外扩散颜色。在调色板中，用户可能可以通过滑动条或鼠标拖动来改变渐变的位置，从而选取不同位置的颜色。 竖渐变取色则可能是通过调整QGradient的方向来实现的，将原本水平的渐变方向改为垂直。这种设计可以提供另一种方式来探索颜色空间，使得选取颜色更为直观和便捷。 在【colorpanelhsb】这个文件名中，我们可以推测这是与HSB（色相、饱和度、亮度）色彩模型相关的代码或资源。HSB模型是另一种常见且直观的颜色表示方式，与RGB或CMYK模型不同，它以人的感知为基础，更容易理解。在这个调色板中，用户可能可以通过调整H、S、B三个参数来选取所需的颜色。 基于QT的调色板是一个利用Qt框架和其提供的色彩管理工具，如QPalette、QColorDialog、QGradient等，构建的交互式颜色选择组件。它不仅提供了横竖渐变的色彩选取方式，还可能支持HSB色彩模型，使得用户在开发图形用户界面时能更加灵活和精准地控制色彩。
基于springboot二手物品交易网站系统【附万字论文+PPT+包部署+录制讲解视频】.zip
最新发布
08-15
标题基于Spring Boot的二手物品交易网站系统研究AI更换标题第1章引言阐述基于Spring Boot开发二手物品交易网站的研究背景、意义、现状及本文方法与创新点。1.1研究背景与意义介绍二手物品交易的市场需求和Spring Boot技术的适用性。1.2国内外研究现状概述当前二手物品交易网站的发展现状和趋势。1.3论文方法与创新点说明本文采用的研究方法和在系统设计中的创新之处。第2章相关理论与技术介绍开发二手物品交易网站所涉及的相关理论和关键技术。2.1Spring Boot框架解释Spring Boot的核心概念和主要特性。2.2数据库技术讨论适用的数据库技术及其在系统中的角色。2.3前端技术阐述与后端配合的前端技术及其在系统中的应用。第3章系统需求分析详细分析二手物品交易网站系统的功能需求和性能需求。3.1功能需求列举系统应实现的主要功能模块。3.2性能需求明确系统应满足的性能指标和安全性要求。第4章系统设计与实现具体描述基于Spring Boot的二手物品交易网站系统的设计和实现过程。4.1系统架构设计给出系统的整体架构设计和各模块间的交互方式。4.2数据库设计详细阐述数据库的结构设计和数据操作流程。4.3界面设计与实现介绍系统的界面设计和用户交互的实现细节。第5章系统测试与优化说明对系统进行测试的方法和性能优化的措施。5.1测试方法与步骤测试环境的搭建、测试数据的准备及测试流程。5.2测试结果分析对测试结果进行详细分析，验证系统是否满足需求。5.3性能优化措施提出针对系统性能瓶颈的优化建议和实施方案。第6章结论与展望总结研究成果，并展望未来可能的研究方向和改进空间。6.1研究结论概括本文基于Spring Boot开发二手物品交易网站的主要发现和成果。6.2展望与改进讨论未来可能的系统改进方向和新的功能拓展。
基于Python的学生宿舍管理系统的设计与实现+数据库文档
08-15
1. 用户与权限管理模块 角色管理： 学生：查看个人住宿信息、提交报修申请、查看卫生检查结果、请假外出登记 宿管人员：分配宿舍床位、处理报修申请、记录卫生检查结果、登记晚归情况 管理员：维护楼栋与房间信息、管理用户账号、统计住宿数据、发布宿舍通知 用户操作： 登录认证：对接学校统一身份认证（模拟实现，用学号 / 工号作为账号），支持密码重置 信息管理：学生完善个人信息（院系、专业、联系电话），管理员维护所有用户信息 权限控制：不同角色仅可见对应功能（如学生无法修改床位分配信息） 2. 宿舍信息管理模块 楼栋与房间管理： 楼栋信息：名称（如 "1 号宿舍楼"）、层数、性别限制（男 / 女 / 混合）、管理员（宿管） 房间信息：房间号（如 "101"）、户型（4 人间 / 6 人间）、床位数量、已住人数、可用状态 设施信息：记录房间内设施（如空调、热水器、桌椅）的配置与完好状态 床位管理： 床位编号：为每个床位设置唯一编号（如 "101-1" 表示 101 房间 1 号床） 状态标记：标记床位为 "空闲 / 已分配 / 维修中"，支持批量查询空闲床位 历史记录：保存床位的分配变更记录（如从学生 A 调换到学生 B 的时间与原因） 3. 住宿分配与调整模块 住宿分配： 新生分配：管理员导入新生名单后，宿管可按专业集中、性别匹配等规则批量分配床位 手动分配：针对转专业、复学学生，宿管手动指定空闲床位并记录分配时间 分配结果公示：学生登录后可查看自己的宿舍信息（楼栋、房间号、床位号、室友列表） 调整管理： 调宿申请：学生提交调宿原因（如室友矛盾、身体原因），选择意向宿舍（需有空位） 审批流程：宿管审核申请，通过后执行床位调换，更新双方住宿信息 换宿记录：保存调宿历史（申请人、原床位、新床位、审批人、时间） 4. 报修与安全管理模块 报修管理： 报修提交：学生选择宿舍、设施类型（如 "
深入学习循环神经网络（RNN）的方法与技巧
08-15
资源下载链接为： https://pan.quark.cn/s/8a7ca10dbd74 深入学习循环神经网络（RNN）的方法与技巧（最新、最全版本！打开链接下载即可用！）
JQuery三季深入学习笔记合集
### JQuery学习笔记合集知识点概述 JQuery是目前前端开发中最流行的JavaScript库之一，它极大地简化了JavaScript编程，特别是在HTML文档遍历和操作、事件处理、动画以及Ajax交互方面。以下是关于“JQuery学习笔记...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值