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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
js查错流程归纳
May 04 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
jquery的live使用注意事项
Feb 18 Javascript
JS的get和set使用示例
Feb 20 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 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
我用php+mysql写的留言本
2006/10/09 PHP
php MYSQL 数据备份类
2009/06/19 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
详解django中自定义标签和过滤器
2017/07/03 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
中队活动总结
2014/08/27 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
淮海战役观后感
2015/06/11 职场文书
研讨会致辞
2015/07/31 职场文书
学生会任命书范本
2015/09/21 职场文书
2016小学新学期寄语
2015/12/04 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android