HBuilderでスライドショーを作成の方法

2年 ago
結衣, 春花
2 minutes

HBuilderでカルーセルを作るには、次の手順を実行します。

  1. 新しいHBuilderプロジェクトを作成
  2. プロジェクトで index.html という名前の HTML ファイルを作成します。
  3. jQueryやswiperなど、必要なCSSやJavaScriptファイルをindex.htmlに取り込む
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css">
    <style>
        /* 添加样式，设置容器大小 */
        .swiper-container {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
    <!-- 创建一个容器 -->
    <div class="swiper-container">
        <!-- 添加轮播图内容 -->
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image1.jpg" alt="图片1"></div>
            <div class="swiper-slide"><img src="image2.jpg" alt="图片2"></div>
            <div class="swiper-slide"><img src="image3.jpg" alt="图片3"></div>
        </div>
        <!-- 添加分页器 -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
    <script>
        // 初始化Swiper对象
        var mySwiper = new Swiper('.swiper-container', {
            // 设置轮播的方向
            direction: 'horizontal',
            // 设置自动切换
            autoplay: true,
            // 设置切换的速度
            speed: 1000,
            // 设置分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        });
    </script>
</body>
</html>
  1. プロジェクト内でimagesという名前のフォルダーを作成し、カルーセルに必要な画像を配置してください。画像は、HTML ファイル内の タグの src 属性と一致するファイル名である必要があります。
  2. HBuilderでindex.htmlファイルを開くと、作成したカルーセル画像の効果が表示されます。
bannerAds