swiper 自动图片无限轮播实现代码


Posted in Javascript onMay 21, 2018

完整代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>

 <link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css" rel="external nofollow" >
 <script src="swiper/js/swiper-3.4.2.min.js"></script>
 <style type="text/css">
  
  .swiper-container {
   width: 900px;
   height: 300px;
  }
 </style>
</head>
<body>
<div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide box1"><img src="img/a.jpg"></div>
  <div class="swiper-slide box2" ><img src="img/b.jpg"></div>
  <div class="swiper-slide box3"><img src="img/c.jpg"></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>

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

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

  // 如果需要前进后退按钮
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  autoplay : 1000,
  speed:100,
  // 如果需要滚动条
//   scrollbar: '.swiper-scrollbar',
  effect : 'coverflow',
  slidesPerView: 3,
  centeredSlides: true,
  coverflow: {
   rotate: 30,
   stretch: 10,
   depth: 60,
   modifier: 2,
   slideShadows : true
  }
 })
</script>

</body>
</html>

如何使用swiper写轮播

之前大家都写过轮播图吧,相信在写轮播图的过程中也因为当中的某些细节烦恼过吧,接下来我给大家讲述一个方便快捷的轮播图吧!

Swiper常用于移动端网站的内容触摸滑动

1.第一步先引入css---swiper.css插件和JQ---swiper.js 插件,

然后呢就开始写轮播图了

<div class="swiper-container">--首先定义一个容器
   <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="" /></div> --添加图片
    <div class="swiper-slide"><img src="" /></div>
    <div class="swiper-slide"><img src="" /></div>
   </div>
   <div class="swiper-pagination"></div>--小圆点分页器
   <div class="swiper-button-prev"></div>--上一页
   <div class="swiper-button-next"></div>--下一页
  </div>

如果想让它动起来,那就继续来写js吧

var mySwiper = new Swiper(".swiper-container",{
     autoplay:1000,--每秒中轮播一次
     loop:true,--可以让图片循环轮播
     autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播
     pagination:".swiper-pagination",--让小圆点显示
     paginationClickable:true,--实现小圆点点击
     prevButton:".swiper-button-prev",--实现上一页的点击
     nextButton:".swiper-button-next",--实现下一页的点击





effect:"flip"--可以实现3D效果的轮播
    })

Swiper轮播的也有它的好处:

1.Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

2.Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

3.Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

同时也有不足之处:(使用Swiper轮播插件ajax请求加载图片时,无法滑动的问题)
因为banner图是动态创建的,在插件开始初始化时,文档流中没用图片,所以没有创建相应宽度,通过调整js加载顺序,问题还是没有解决。
最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的,添加observer:true后问题解决!

var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
})

Swiper拥有丰富的API接口。(不过关于中文文档不多,没找着。)能够让开发者生成个人独有的分页器(pagination),上下滑块的按钮

以及4个回调函数:1.onTouchStart

2.onTouchMove

3.onTouchEnd

4.onSlideSwitch。
以上内容是我个人总结,希望对各位有所帮助!

swiper轮播图(逆向自动切换类似于无限循环)

swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高,

,不过还是能够用swiper本身的特性更改成无限循环的轮播的。

HTML代码

<div class="course-banner-box">
  <div class="swiper-container">
    <div class="swiper-wrapper"> <!--四张轮播图-->
      <div class="swiper-slide slide1"></div>
      <div class="swiper-slide slide2"></div>
      <div class="swiper-slide slide3"></div>
      <div class="swiper-slide slide4"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="button-box">
      <div class="button"> <!--左右按钮-->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

    </div>

  </div>
</div>

script代码

<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',//pagination分页器
    nextButton: '.swiper-button-next',//前进后退按钮
    prevButton: '.swiper-button-prev',
    paginationClickable: true,//参数设置为true时,点击分页器的指示点分页器会控制Swiper切换
    spaceBetween: 30,//slide之间的距离(单位px)。
    centeredSlides: true,//设定为true时,活动块会居中,而不是默认状态下的居左。
    loop : true,//复制多份循环(这里就是让轮播看起来是循环的,去掉这个就恢复了默认的swiper轮播)
    autoplay: 3000,//自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换。
    autoplayDisableOnInteraction: false//点击后打断auto-play
  });
</script>

以上就是swiper 自动图片无限轮播的全部内容了,需要的朋友可以可以参考一下。

Javascript 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
JavaScript事件委托实例分析
May 26 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 #Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 #jQuery
基于Vue的延迟加载插件vue-view-lazy
May 21 #Javascript
jQuery获取随机颜色的实例代码
May 21 #jQuery
JS实现常见的查找、排序、去重算法示例
May 21 #Javascript
vue组件jsx语法的具体使用
May 21 #Javascript
关于vue的语法规则检测报错问题的解决
May 21 #Javascript
You might like
Smarty安装配置方法
2008/04/10 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php动态函数调用方法
2015/05/21 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
json对象转字符串如何实现
2012/12/02 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
Python yield 使用方法浅析
2017/05/20 Python
python下载图片实现方法(超简单)
2017/07/21 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
flask入门之表单的实现
2018/07/18 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python能做什么
2020/06/02 Python
python实例化对象的具体方法
2020/06/17 Python
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
家电业务员岗位职责
2014/03/10 职场文书
行政人事岗位职责
2014/03/17 职场文书
2014年校长工作总结
2014/12/11 职场文书
同学聚会通知短信
2015/04/20 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
论语读书笔记
2015/06/26 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript