手机端轮播图从页面绘制到加载数据

头一次写手机端的H5页面，还有点小激动，看起来简单，但是真的学问多多啊，我又要开始总结学习经验了~
给我的第一个任务是非常简单的轮播图，哈哈哈。
用了一个叫Swiper的组件，敲好用。附一个链接以备将来用。http://www.swiper.com.cn/
需要引用他的css和js文件，里面会有链接供大家下载。
html代码

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1div>
        <div class="swiper-slide">Slide 2div>
        <div class="swiper-slide">Slide 3div>
    div>
    
    <div class="swiper-pagination">div>

    
    <div class="swiper-button-prev">div>
    <div class="swiper-button-next">div>

    
    <div class="swiper-scrollbar">div>
div>

js代码

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,

    // 如果需要分页器
    pagination: '.swiper-pagination',

    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  script>

以上是官方教学模板，但是不一定适合自己的项目需求，你懂的~
所以我要开始记录我的代码啦啦啦

用简单的GET请求把数据请求回来，然后遍历显示到页面相对应的banner上。
没用jquery写过，难坏我。

总结一下jq的写法就是先把数据都遍历出来，然后定义一个变量，存放需要放已经遍历好数据的DOM节点片段，然后append到html页面上的空DIV中，通过id

思路是这样的：先写定几个死的图片，看html的结构对不对，如果没问题的话继续往下，这时候可以到ajax的步骤了，console.log(data)看看返回的数据是什么格式的，然后定义一个页面可以用的变量 被赋值为var _data = data.list[i];，随后就可以用这个_data在后面的拼节点的地方显示数据了。

 <div class="swiper-container">

        <div class="swiper-wrapper" id="slider">div>//放拼接好的节点

        <div class="swiper-pagination">div>//分页显示的小点点
    div>

$(function () {
            $.ajax({
                type: 'GET',
                url: 'a.json',
                success: function (data) {
                    var str = "";
                    for (i = 0; i < data.list.length; i++) {
                        var _data = data.list[i];
                        str += '
'">' +
                            ''" alt="">
';
                    };
                    $("#slider").append(str);

                    if(data.data.list.length > 1){
                        var mySwiper = new Swiper('.swiper-container', {
                            loop: true,
                            autoplay: 2000,
                            pagination: '.swiper-pagination',
                        })
                    }
                }
            })

还有一个新的知识点：

那条横线，是这么搞定的：

<div class="hotline">
        <div class="hotlineWord">
            <hr/>
            客服热线
            <hr/>
        div>
        <div class="hotlineNum">
            <a href="tel:400-111-5289">400-111-5289a>
        div>
    div>

就是手机上点电话号码就能打出去 是这么完成的：

 <a href="tel:400-111-5289">400-111-5289a>

css是这样：

   .hotline {
                position: absolute;
                bottom: 10px;
                width: 100%;
                color: rgba(206, 200, 200, 0.89);
            }

            .hotline hr {
                width: 20%;
                display: inline-block;
                background-color: rgba(206, 200, 200, 0.89);
                border: none;
                height: 1px;
            }

            .hotlineWord {
                width: 100%;
                text-align: center;
                font-size: 20px;
            }

            .hotlineNum {
                text-align: center;
            }

            .hotlineNum a {
                font-size: 24px;
                color: #32a8ff;
            }

大功告成！

学习就得不要脸的问！加油吧 少女，早晚有一天你不用问别人~