jQuery实现轮播图广告 jQuery实现轮播图广告

轮播图广告实例描述本实例将实现一个轮播图广告的动画效果。HTML5中实现动画轮播的方法有很多，这里将使用一种非常简便的JavaScript框架：jQuery框架。jQuery框架是在实际开发中经常用到的JavaScript工具，方便实用，下面将详细讲解。

文章图片

技术要点（1）认识jQuery框架
jQuery是一个轻量级的JavaScript框架，提供一种渐变的JavaScript设计模式，优化HTML5文档操作等，改变了用户编写JavaScript代码的方式。
jQuery功能很强大，它能够帮助用户方便、快速地完成下面任务。
l 精确选择页面对象。
jQuery提供了可靠而富有效率的选择器，只需要一个CSS选择器字符串，即可准确获取需要检查或操纵的文档元素。
l 进行可靠的CSS样式控制。
使用JavaScript控制CSS受限于浏览器的兼容性，而jQueryk可以弥补这一不足，它提供了跨浏览器的标准解决方案。
l 支持网页特效。
jQuery 内置了一批淡入、擦除和移动之类的效果，以及制作新效果的工具包，用户只需要简单地调用动画函数，就可以快速设计出高级动画页面。如果直接用JavaScript实现，动画效果获取很生硬，或者很粗糙。
（2）使用 jQuery 框架
jQuery 框架包括jQuery Core（核心库）、jQuery UI（界面库）和Sizzle（CSS选择器）等部分，下面讲解具体使用方法。
l 下载jQuery
访问jQuery官方网站（http://jquery.com/），下载最新版本的jQuery库文件，在浏览器的地址栏中输入“http://jquery.com/download”，并按下键，将进入到jQuery的下载页面，如图2所示。

文章图片

在下载页面中，可以下载最新版本的jQuery库，目前，jQuery的最新版本是jQuery 3.4.1。在图2中的“Download the compressed, production jQuery 3.4.1”超链接上单击鼠标右键，在弹出的菜单中选择“链接另存为”选项，然后单击“保存”按钮，将jQuery库下载到本地计算机上。下载后的文件名为jquery-3.4.1.min.js。
l 安装jQuery
jQuery库不需要复杂的安装，只需要把下载的库文件放到站点中，然后导入到页面中即可。
例如：

安装jQuery - 锐客网 ="text/javascript" src="https://www.it610.com/article/js/jquery-3.4.1.min.js"> > //在这里用户就可以使用jQuery编程了。

l 测试jQuery
引入jQuery库文件之后，就可以在页面中进行jQuery开发了。开发的步骤非常简单，在导入jQuery库文件的
例如：

测试jQuery - 锐客网 ="text/javascript" src="https://www.it610.com/article/js/jquery-3.4.1.min.js"> > $(function(){ alert("Hi,您好！") })

在浏览器中预览该网页文件，则可以看到在当前窗口中会弹出一个提示对话框，如图3所示。

文章图片

代码实现 【jQuery实现轮播图广告】轮播图广告

轮播图广告 - 锐客网文章图片文章图片文章图片 ="text/javascript" src="https://www.it610.com/article/js/jquery-3.4.1.min.js"> ="text/javascript" src="https://www.it610.com/article/js/jquery.books_rotaion.js"> ="text/javascript">$(".book-rotaion").book_rotaion({auto: true});