Web API(7)

Swiper插件的使用

中文官网地址：https://www.swiper.com.cn/

1.引入插件相关文件
2.按照规定语法使用

注意：要引入swiper中的css文件 js文件 html结构等，不要随意更改类名

Swiper的使用方法

1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/**swiper-bundle.min.css**">
</head>
<body>
    ...
    <script src="dist/js/**swiper-bundle.min.js**"></script>
    ...
</body>
</html>

2.HTML内容。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
    width: 600px;
    height: 300px;
}

4.初始化Swiper

 <script> var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  }) </script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。

如果作为CommonJs 或ES 模块引入

//CommonJs
var Swiper = require('swiper');    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

//ES
import Swiper from 'swiper';    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

轮播图1

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <link rel="stylesheet" type="text/css" href="swiper-6.1.2/package/swiper-bundle.css" />
        <script src="swiper-6.1.2/package/swiper-bundle.js"></script>
        <style>
            html,
            body {
                position: relative;
                height: 100%;
            }

            body {
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color: #000;
                margin: 0;
                padding: 0;
            }

            .swiper-container {
                width: 990px height: 540px;
                margin: 200px auto;
            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

            img {
                width: 990px;
                height: 540px;
            }

            .swiper-pagination-bullet {
                width: 20px;
                height: 10px;
                border-radius: 0px;
                background-color: white;
            }
        </style>
    </head>

    <body>
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/focus1.jpg"></div>
                <div class="swiper-slide"><img src="img/focus2.jpg"></div>
                <div class="swiper-slide"><img src="img/focus3.jpg"></div>
                <div class="swiper-slide"><img src="img/focus4.jpg"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>

        </div>
    </body>
    <script>
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>

</html>

轮播图2

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Swiper demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

        <!-- Link Swiper's CSS -->
        <link rel="stylesheet" type="text/css" href="css/swiper-bundle.css" />
        <script src="js/swiper-bundle.js"></script>

        <!-- Demo styles -->
        <style>
            body {
                background: #fff;
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color: #000;
                margin: 0;
                padding: 0;
                background-color: rgba(0, 0, 0, 0.5);
            }

            .swiper-container {
                width: 100%;
                padding-top: 50px;
                padding-bottom: 50px;
            }

            .swiper-slide {
                background-position: center;
                background-size: cover;
                width: 300px;
                height: 300px;

            }
        </style>
    </head>

    <body>
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(./img/focus1.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(./img/focus2.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(./img/focus3.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(./img/focus4.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(./img/focus1.jpg)"></div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- Swiper JS -->
        <script src="../package/swiper-bundle.min.js"></script>

        <!-- Initialize Swiper -->
        <script>
            window.addEventListener('DOMContentLoaded', function() {
                var swiper = new Swiper('.swiper-container', {
                    effect: 'coverflow',
                    grabCursor: true,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    coverflowEffect: {
                        rotate: 50,
                        stretch: 0,
                        depth: 100,
                        modifier: 1,
                        slideShadows: true,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                    },
                });
            })
        </script>
    </body>

</html>

插件使用总结

1.确认插件实现的功能

2.去官网查看使用说明

3.下载插件

4.打开demo实例文件，查看需要引入的相关文件，并且引入

5.复制demo实例文件中的结构html，样式css以及js代码

SuperSlider插件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>tab栏切换</title>
        <script src="js/jquery1.42.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="SuperSlide2/jquery.SuperSlide.2.1.3.source.js"></script>
        <style type="text/css">
            /* css 重置 */
            /* css 重置 */
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body {
                background: #fff;
                font: normal 12px/22px 宋体;
            }

            img {
                border: 0;
            }

            a {
                text-decoration: none;
                color: #333;
            }

            a:hover {
                color: #1974A1;
            }


            /* 本例子css */
            .slideTxtBox {
                width: 450px;
                border: 1px solid #ddd;
                text-align: left;
            }

            .slideTxtBox .hd {
                height: 30px;
                line-height: 30px;
                background: #f4f4f4;
                padding: 0 10px 0 20px;
                border-bottom: 1px solid #ddd;
                position: relative;
            }

            .slideTxtBox .hd ul {
                float: left;
                position: absolute;
                left: 20px;
                top: -1px;
                height: 32px;
            }

            .slideTxtBox .hd ul li {
                float: left;
                padding: 0 15px;
                cursor: pointer;
            }

            .slideTxtBox .hd ul li.on {
                height: 30px;
                background: #fff;
                border: 1px solid #ddd;
                border-bottom: 2px solid #fff;
            }

            .slideTxtBox .bd ul {
                padding: 15px;
                zoom: 1;
            }

            .slideTxtBox .bd li {
                height: 24px;
                line-height: 24px;
            }

            .slideTxtBox .bd li .date {
                float: right;
                color: #999;
            }

            /* 下面是前/后按钮代码，如果不需要删除即可 */
            .slideTxtBox .arrow {
                position: absolute;
                right: 10px;
                top: 0;
            }

            .slideTxtBox .arrow a {
                display: block;
                width: 5px;
                height: 9px;
                float: right;
                margin-right: 5px;
                margin-top: 10px;
                overflow: hidden;
                cursor: pointer;
                background: url(images/arrow.png) 0 0 no-repeat;
            }

            .slideTxtBox .arrow .next {
                background-position: 0 -50px;
            }

            .slideTxtBox .arrow .prevStop {
                background-position: -60px 0;
            }

            .slideTxtBox .arrow .nextStop {
                background-position: -60px -50px;
            }
        </style>

    </head>
    <body>
        <div class="slideTxtBox">
            <div class="hd">

                <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
                <span class="arrow"><a class="next"></a><a class="prev"></a></span>

                <ul>
                    <li>教育</li>
                    <li>培训</li>
                    <li>出国</li>
                </ul>
            </div>
            <div class="bd">
                <ul>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
                </ul>
                <ul>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子：教你备考SAT</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光！</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
                </ul>
                <ul>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            jQuery(".slideTxtBox").slide();
        </script>

    </body>
</html>

移动端视频插件 zy.media.js

主要为了解决视频在各个浏览器显示不统一的问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="zy.media.min.css">
    <script src="zy.media.min.js"></script>
    <style type="text/css">
        #modelView {
     
            z-index: 0;
            opacity: 0.7;
            height: 100%;
            width: 100%;
            position: relative;
        }
        
        .playvideo {
            padding-top: auto;
            z-index: 9999;
            position: relative;
            width: 300px;
            height: 200px;
        }
        
        .zy_media {
            z-index: 999999999
        }
    </style>

</head>

<body>

    <div class="playvideo">
        <div class="zy_media">
            <video data-config='{"mediaTitle": "测试"}'>
                    <source src="mov.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频
                </video>

        </div>
        <div id="modelView">&nbsp;</div>
    </div>
    <script>
        zymedia('video', {
            autoplay: false
        });
    </script>

</body>

</html>

框架

框架与插件的区别

框架：大而全拥有一整套解决方案
插件：小而专一某个功能的解决方案。

bootstarp轮播图

注意：bootstrap是建立在jquery上的要先引进Jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery轮播图</title>
        <script src="jquery-3.5.1.js"></script>
        <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
        <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .foucs {
                width: 990px;
                height: 540px;
                margin: 200px auto;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="foucs">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>
            
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="./bootstrap-3.3.7-dist/images/img/focus2.jpg" alt="...">
                  <div class="carousel-caption">
                   
                  </div>
                </div>
                <div class="item">
                 <img src="./bootstrap-3.3.7-dist/images/img/focus3.jpg" alt="...">
                  <div class="carousel-caption">
               
                  </div>
                </div>
                
                <div class="item">
                 <img src="./bootstrap-3.3.7-dist/images/img/focus4.jpg" alt="...">
                  <div class="carousel-caption">
                
                  </div>
                </div>
                
                
              </div>
            
              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
        <script>
            $('.carousel').carousel({
              interval: 1000
            })
        </script>
    </body>
</html>

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

1.7.1.本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

1.7.2.window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地存储</title>
</head>

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">设置数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>

</body>
<script>
    // 获取元素
    var ipt = document.querySelector('input');
    var set = document.querySelector('.set');
    var get = document.querySelector('.get');
    var remove = document.querySelector('.remove');
    var del = document.querySelector('.del');


    // 存储数据
    set.addEventListener('click', function() {
        //当我们点击之后，就把表单里面的值存储起来
        var val = ipt.value;
        sessionStorage.setItem('uname', val);


    })

    //获取数据
    get.addEventListener('click', function() {
        console.log(sessionStorage.getItem('uname'))
    })

    // 删除数据
    remove.addEventListener('click', function() {
        console.log(sessionStorage.removeItem('uname'))
    })

    //清空数据
    del.addEventListener('click', function() {
        console.log(sessionStorage.clear())
    })
</script>

</html>

1.7.3.window.localStorage

1、声明周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)