前端案例-21 轮播图,js文件的页面引入

最新推荐文章于 2022-07-10 17:42:07 发布

KathyLJQ

最新推荐文章于 2022-07-10 17:42:07 发布

阅读量300

点赞数

分类专栏：前端案例

本文链接：https://blog.csdn.net/kathyljq/article/details/115831637

版权

本文详细介绍了如何在前端项目中引入和使用`index.css`、`animate.js`及`index.js`文件，实现一个功能丰富的轮播图效果。通过结合CSS样式与JavaScript动态效果，为网页添加了21种不同的轮播图展示方式。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>

</head>

<body>
    <!-- shortcut 快捷导航栏部分 -->
    <div class="top_bar">
        <div class="shortcut middle">
            <ul class="fl">
                <li>品优购欢迎您！</li>
                <li>
                    <a href="#" class="login">请登录&nbsp; </a>
                </li>
                <li>
                    <a href="register.html" class="register">免费注册</a>
                </li>
            </ul>
            <ul class="fr">
                <li>
                    <a href="#">我的订单</a>
                </li>
                <li></li>
                <li class="down_arrow">
                    <a href="#">我的品优购</a>
                </li>
                <li></li>
                <li>
                    <a href="#">品优购会员</a>
                </li>
                <li></li>
                <li>
                    <a href="#">企业采购</a>
                </li>
                <li></li>
                <li class="down_arrow">
                    <a href="#">关注品优购</a>
                </li>
                <li></li>
                <li class="down_arrow">
                    <a href="#">客户服务</a>
                </li>
                <li></li>
                <li class="down_arrow">
                    <a href="#">网站导航</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- header 头部部分 -->
    <header>
        <div class="middle">
            <h1 class="logo">
                <a href="index.html" title="品优购">品优购</a>
            </h1>
            <!-- 搜索框 -->
            <div class="search">
                <input type="search" placeholder="  请输入商品名称">
                <button>搜索</button>
            </div>
            <div class="hotwords">
                <a href="#">优惠购收发</a>
                <a href="#">优惠购收发</a>
                <a href="#">优惠购收发</a>
                <a href="#">优惠购收发</a>
                <a href="#">优惠购收发</a>
                <a href="#">优惠购收发</a>
                <a href="#">优惠购收发</a>
            </div>
            <div class="shopcar">
                <a href="#">我的购物车
                    <div class="count">
                        800000
                    </div>
                </a>
            </div>

        </div>


    </header>
    <!-- nav部分 -->
    <nav>
        <div class="middle">
            <div class="dropdown">
                <dl>
                    <dt>
                        全部商品分类
                    </dt>
                    <dd>

                        <ul>
                            <li>
                                <a href="#">手机、</a> <a href="#">电脑、</a> <a href="#">通讯、</a>
                            </li>
                            <li>
                                <a href="#">手机、</a> <a href="#">电脑、</a> <a href="#">通讯、</a>
                            </li>
                            <li>
                                <a href="#">手机、</a>
                            </li>
                            <li>
                                <a href="#">手机、</a> <a href="#">电脑、</a> <a href="#">通讯、</a>
                            </li>
                            <li>
                                <a href="#">手机、</a> <a href="#">电脑、</a> <a href="#">通讯、</a>
                            </li>
                            <li>
                                <a href="#">手机、</a> <a href="#">电脑、</a> <a href="#">通讯、</a>
                            </li>
                            <li>
                                <a href<