jQuery实现轮播图广告

轮播图广告

实例描述

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

技术要点

(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实现轮播图广告_第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库不需要复杂的安装,只需要把下载的库文件放到站点中,然后导入到页面中即可。
例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安装jQuery</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script>
        //在这里用户就可以使用jQuery编程了。
    </script>
</head>
<body>
</body>
</html>

l 测试jQuery

引入jQuery库文件之后,就可以在页面中进行jQuery开发了。开发的步骤非常简单,在导入jQuery库文件的

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试jQuery</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            alert("Hi,您好!")
        })
    </script>
</head>
<body>
</body>
</html>

在浏览器中预览该网页文件,则可以看到在当前窗口中会弹出一个提示对话框,如图3所示。
jQuery实现轮播图广告_第3张图片

代码实现

轮播图广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图广告</title>
    <link rel="stylesheet" type="text/css" href="css/book.css">
</head>
<body>
<div class="book_mr_right">
    <div class="book-rotaion">
        <ul class="rotaion_list">
            <li><a href="#"><img src="img/book_banner1.jpg" alt="Java 项目开发实战"></a></li>
            <li><a href="#"><img src="img/book_banner2.jpg" alt="Android 项目开发实战"></a></li>
            <li><a href="#"><img src="img/book_banner3.jpg" alt="程序设计互联网图书"></a></li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.books_rotaion.js"></script>
<script type="text/javascript">$(".book-rotaion").book_rotaion({auto: true});</script>
</html>

你可能感兴趣的:(jQuery实现轮播图广告)