• swiper结合ajax的轮播图


    Swiper

      是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图、触屏tab切换、触屏多图切换等常用效果。

          开源、免费、稳定、应用广泛

      这就是swiper简单的介绍,由于是结合ajax使用,所以要先定义json文件

      json:

        

      定义好json文件后,在HTML页面中简单布局,如下图:

        

        *swiper-container代表swiper的容器

        <div class="swiper-container">

          *swiper-wrapper 代表触控的对象

          <div class="swiper-wrapper">

            *swiper-slide 代表切换的滑块,可包含文字、图片等
            <div class = "swiper-slide"></div>
          </div>

          *swiper-pagination 分页器
          <div class="swiper-pagination"></div>

          *swiper-button-prev 导航按钮,prev代表上一页、next代表下一页
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

        因为swiper是移动端滑动插件,所以在HTML页面中要写<meta>标签,要引入相关swiper的css,js等文件;

        然后,就需要用ajax获取json文件并获取到页面上:

         如下图:

          

        在onreadystatechange这个方法中是动态添加swiper-slide滑块;

        添加好之后,还需要用swiper的方法让他动起来;

          var mySwiper = new Swiper ('.swiper-container', {

            *页面滑动一次的时间
            autoplay:2000,
            
    *操作后是否继续滚动
            

            *是否循环
            loop: true,
            *如果需要分页器
            pagination: '.swiper-pagination',
            *点击小圆点是否可以切换页面
            paginationClickable:true,
            *如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
          })

        这样就完成了一个结合ajax渲染页面的轮播图,如果有些不标准的请评论!!!!!!

  • 相关阅读:
    C# 使用消息队列,包括远程访问
    Python3中urllib使用与源代码
    多年前写的DataTable与实体类的转换
    DataTable添加列和行的三种方法
    DevExpress 常用命令包括导出-打印-打印预览等
    c#开发_Dev的关于XtraGrid的使用(GridControl小结)
    正则表达式精华(包涵常用经典方法)
    数据库 插入时 碰到NULL报错判断的一种方法(技巧)
    MDI窗体简单方法(调用,闪屏)
    GridControl GridView 修改表格中的标题居中
  • 原文地址:https://www.cnblogs.com/user-5253/p/7003796.html
Copyright © 2020-2023  润新知