<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./index/css/style.css">
<link rel="stylesheet" type="text/css" href="./index/css/font.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="./index/css/all.min.css">
<!--引入Swiper-->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js">
</script>
<!--<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<script src="./js/swiper-bundle.min.js"> </script>-->
</head>
<body>
<div class="main">
<div class="left">
<!--Logo-->
<div class="main-img">
<!--<img src="./index/img/icon/logo.png" alt="img">-->
<div class="img-title">
<span class="img-title"><a href="https://study.jonylee.top/50+js-css-html/">Web 50+</a></span>
</div>
</div>
<div class="message cards" id="switchmore">
<div class="des" id="des">
<i class="fa-solid fa-quote-left"></i>
<div class="des-title"><span id="change">Hello World !</span><br><span id="change1">50+web练习小项目 HTML, CSS & JS</span></div>
<i class="fa-solid fa-quote-right"></i>
</div>
</div>
</div>
<div class="right">
<div class="father swiper">
<div class="swiper-wrapper">
<!-- 第一页 -->
<div class="swiper-slide">
<!-- 第一行 -->
<div class="son">
<div class="second" onclick="window.open('./expanding-cards/','_self')">
<img src="./index/images/01.jpg">
<span>01 扩展卡片</span>
</div>
<div class="second" onclick="window.open('./progress-steps/','_self')">
<img src="./index/images/02.jpg">
<span>02 进度条</span>
</div>
<div class="second" onclick="window.open('./rotating-nav-animation/','_self')">
<img src="./index/images/03.jpg ">
<span>03 旋转导航动画</span>
</div>
<div class="second" onclick="window.open('./hidden-search/','_self')">
<img src="./index/images/04.jpg">
<span>04 隐藏搜索框</span>
</div>
</div>
<!-- 第二行 -->
<div class="son">
<div class="second" onclick="window.open('./blurry-loading/','_self')">
<img src="./index/images/05.jpg">
<span>05 模糊加载</span>
</div>
<div class="second" onclick="window.open('./scroll-animation/','_self')">
<img src="./index/images/06.jpg">
<span>06 滚动动画</span>
</div>
<div class="second" onclick="window.open('./split-landing-page/','_self')">
<img src="./index/images/07.jpg">
<span>07 拆分登陆页面</span>
</div>
<div class="second" onclick="window.open('./form-input-wave/','_self')">
<img src="./index/images/08.jpg">
<span>08 表单输入波浪</span>
</div>
</div>
<!-- 第三行 -->
<div class="son">
<div class="second" onclick="window.open('./sound-board/','_self')">
<img src="./index/images/09.jpg">
<span>09 声音卡</span>
</div>
<div class="second" onclick="window.open('./dad-jokes/','_self')">
<img src="./index/images/10.jpg">
<span>10 爸爸的笑话</span>
</div>
<div class="second" onclick="window.open('./event-keycodes/','_self')">
<img src="./index/images/11.jpg">
<span>11 事件键码</span>
</div>
<div class="second" onclick="window.open('./faq-collapse/','_self')">
<img src="./index/images/12.jpg">
<span>12 常见问题折叠</span>
</div>
</div>
</div>
<!-- 第二页 -->
<div class="swiper-slide">
<!-- 第四行 -->
<div class="son">
<div class="second" onclick="window.open('./random-choice-picker/','_self')">
<img src="./index/images/13.jpg">
<span>13 随机选择器</span>
</div>
<div class="second" onclick="window.open('./animated-navigation/','_self')">
<img src="./index/images/14.jpg">
<span>14 导航动画</span>
</div>
<div class="second" onclick="window.open('./incrementing-counter/','_self')">
<img src="./index/images/15.jpg">
<span>15 递增计数器</span>
</div>
<div class="second" onclick="window.open('./drink-water/','_self')">
<img src="./index/images/16.jpg">
<span>16 喝水</span>
</div>
</div>
<!-- 第五行 -->
<div class="son">
<div class="second" onclick="window.open('./movie-app/','_self')">
<img src="./index/images/17.jpg">
<span>17 影视app</span>
</div>
<div class="second" onclick="window.open('./background-slider/','_self')">
<img src="./index/images/18.jpg">
<span>18 背景滑块</span>
</div>
<div class="second" onclick="window.open('./theme-clock/','_self')">
<img src="./index/images/19.jpg">
<span>19 主题时钟</span>
</div>
<div class="second" onclick="window.open('./button-ripple-effect/','_self')">
<img src="./index/images/20.jpg">
<span>20 按钮涟漪效果</span>
</div>
</div>
<!-- 第六行 -->
<div class="son">
<div class="second" onclick="window.open('./drag-n-drop/','_self')">
<img src="./index/images/21.jpg">
<span>21 拖放</span>
</div>
<div class="second" onclick="window.open('./drawing-app/','_self')">
<img src="./index/images/22.jpg">
<span>22 画图APP</span>
</div>
<div class="second" onclick="window.open('./kinetic-loader/','_self')">
<img src="./index/images/23.jpg">
<span>23 加载动画</span>
</div>
<div class="second" onclick="window.open('./content-placeholder/','_self')">
<img src="./index/images/24.jpg">
<span>24 内容占位符</span>
</div>
</div>
</div>
<!-- 第三页 -->
<div class="swiper-slide">
<!-- 第七行 -->
<div class="son">
<div class="second" onclick="window.open('./sticky-navigation/','_self')">
<img src="./index/images/25.jpg">
<span>25 粘性导航栏</span>
</div>
<div class="second" onclick="window.open('./double-vertical-slider/','_self')">
<img src="./index/images/26.jpg">
<span>26 双垂直滑块</span>
</div>
<div class="second" onclick="window.open('./toast-notification/','_self')">
<img src="./index/images/27.jpg">
<span>27 Toast通知</span>
</div>
<div class="second" onclick="window.open('./github-profiles/','_self')">
<img src="./index/images/28.jpg">
<span>28 Github 配置文件</span>
</div>
</div>
<!-- 第八行 -->
<div class="son">
<div class="second" onclick="window.open('./double-click-heart/','_self')">
<img src="./index/images/29.jpg">
<span>29 双击加心点赞</span>
</div>
<div class="second" onclick="window.open('./auto-text-effect/','_self')">
<img src="./index/images/30.jpg">
<span>30 自动文本效果</span>
</div>
<div class="second" onclick="window.open('./password-generator/','_self')">
<img src="./index/images/31.jpg">
<span>31 密码生成器</span>
</div>
<div class="second" onclick="window.open('./good-cheap-fast/','_self')">
<img src="./index/images/32.jpg">
<span>32 多快好省</span>
</div>
</div>
<!-- 第九行 -->
<div class="son">
<div class="second" onclick="window.open('./notes-app/','_self')">
<img src="./index/images/33.jpg">
<span>33 便签</span>
</div>
<div class="second" onclick="window.open('./animated-countdown/','_self')">
<img src="./index/images/34.jpg">
<span>34 动画倒计时</span>
</div>
<div class="second" onclick="window.open('./image-carousel/','_self')">
<img src="./index/images/35.jpg">
<span>35 图片轮播</span>
</div>
<div class="second" onclick="window.open('./hoverboard/','_self')">
<img src="./index/images/36.jpg">
<span>36 彩色悬停效果</span>
</div>
</div>
</div>
<!-- 第四页 -->
<div class="swiper-slide">
<!-- 第十行 -->
<div class="son">
<div class="second" onclick="window.open('./pokedex/','_self')">
<img src="./index/images/37.jpg">
<span>37 口袋妖怪</span>
</div>
<div class="second" onclick="window.open('./mobile-tab-navigation/','_self')">
<img src="./index/images/38.jpg">
<span>38 移动选项卡导航</span>
</div>
<div class="second" onclick="window.open('./password-strength-background/','_self')">
<img src="./index/images/39.jpg">
<span>39 密码强度背景</span>
</div>
<div class="second" onclick="window.open('./3d-boxes-background/','_self')">
<img src="./index/images/40.jpg">
<span>40 3D盒子背景</span>
</div>
</div>
<!-- 第十一行 -->
<div class="son">
<div class="second" onclick="window.open('./verify-account-ui/','_self')">
<img src="./index/images/41.jpg">
<span>41 验证账户UI</span>
</div>
<div class="second" onclick="window.open('./live-user-filter/','_self')">
<img src="./index/images/42.jpg">
<span>42 实时用户筛选器</span>
</div>
<div class="second" onclick="window.open('./feedback-ui-design/','_self')">
<img src="./index/images/43.jpg">
<span>43 反馈UI设计</span>
</div>
<div class="second" onclick="window.open('./custom-range-slider/','_self')">
<img src="./index/images/44.jpg">
<span>44 自定义范围滑块</span>
</div>
</div>
<!-- 第十二行 -->
<div class="son">
<div class="second" onclick="window.open('./netflix-mobile-navigation/','_self')">
<img src="./index/images/45.jpg">
<span>45 Netflix移动导航</span>
</div>
<div class="second" onclick="window.open('./quiz-app/','_self')">
<img src="./index/images/46.jpg">
<span>46 测验APP</span>
</div>
<div class="second" onclick="window.open('./testimonial-box-switcher/','_self')">
<img src="./index/images/47.jpg">
<span>47 推荐式换盒器</span>
</div>
<div class="second" onclick="window.open('./random-image-generator/','_self')">
<img src="./index/images/48.jpg">
<span>48 随机图像生成器</span>
</div>
</div>
</div>
<!-- 第五页 -->
<div class="swiper-slide">
<!-- 第十三行 -->
<div class="son">
<div class="second" onclick="window.open('./todo-list/','_self')">
<img src="./index/images/49.jpg">
<span>49 todo列表</span>
</div>
<div class="second" onclick="window.open('./insect-catch-game/','_self')">
<img src="./index/images/50.jpg">
<span>50 捉虫游戏</span>
</div>
<div class="second" onclick="window.open('./simple-timer/','_self')">
<img src="./index/images/51.jpg">
<span>51 简单计时器</span>
</div>
<div class="second" onclick="window.open('./3d-boxes-background/','_self')">
<img src="./index/images/add.png">
<span>52 待添加</span>
</div>
</div>
</div>
</div>
<div class="swiper-pagination" style="position: static;margin-top: 4px;"></div>
</div>
</div>
</div>
<!--Swiper初始化设置-->
<script>
var mySwiper = new Swiper('.swiper', {
direction: 'horizontal', // 垂直切换选项,水平：horizontal；垂直：vertical
loop: false, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 鼠标滚轮控制Swiper切换
mousewheel: true, // 开启鼠标滚轮控制Swiper切换
mousewheelDirectionNormalize: true, // 如果需要，可以设置鼠标滚轮的方向，true 为向下或向右表示“后”，false 为向上或向左表示“后”
mousewheelSensitivity: 1, // 鼠标滚轮的滚动行为，表示每次滚动多少个slide，默认为1
mousewheelSpeed: 2000, // 表示滚动的速度，默认为1000ms，即1秒
mousewheelPropagation: true // 表示滚动的反弹效果，默认为100ms
// 如果需要前进后退按钮
/* navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},*/
// 如果需要滚动条
/*scrollbar: {
el: '.swiper-scrollbar',
},*/
})
</script>
</body>
</html>