jQuery实现轮播图广告

超、凢脫俗 2023-07-03 15:29 51阅读 0赞

# 轮播图广告 #

## 实例描述 ##

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

## 技术要点 ##

（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所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NTQwMQ_size_16_color_FFFFFF_t_70 1]

在下载页面中，可以下载最新版本的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所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NTQwMQ_size_16_color_FFFFFF_t_70 2]

## 代码实现 ##

轮播图广告

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NTQwMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200207145356720.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NTQwMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NTQwMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200207145526732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NTQwMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NTQwMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200207145802383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NTQwMQ==,size_16,color_FFFFFF,t_70