Swiper.js插件超简单实现轮播图

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。超好用
话不多说,直接上教程

1、首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN

 <!-- Link Swiper-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="external nofollow" >
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

请勿直接引入Swiper中文网的文件

x <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>

x <link href="http://www.swiper.com.cn/dist/css/swiper.min.css" rel="external nofollow" />

2、CSS样式

 <style>
    .swiper-container {
    //你可以在这里设置宽高
      width: 50%;
      height: 50%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      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:250px;
    }
  </style>

3、HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img/000.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/001.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/002.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/003.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/004.jpg" alt=""></div>
    //添加图片
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

4、javaScript

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

效果图

你只需要替换一下图片,和修改一下图片及轮播图的大小就可以轻轻松松写出一个很棒的轮播图,怎么样是不是很简单

补充:怎么用swiper实现匀速无缝轮播

1.设置属性

freeMode:true,

autoplay: {

delay:0

}

2.然后再修改或者覆盖样式

.swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: linear; /*之前是ease-out*/
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}

补充2:移动端swiper.js中的坑

步骤:

1,渲染日历:日历是自己开发的(注意几点:1,获得当前日期;2,一个月多少天;3,闰月情况;4,每个月1号是礼拜几;。。。)

2,因项目比较近,所以采用了swiper.js控件来做滑动效果;

问题: 

1,首先遇到的是在ios上测试是没有问题的,包括UC,百度等浏览器;不过在魅族,华为手机上测试出现问题了-----不能来回切换;

解决方法:考虑到应该是兼容性问题,于是乎查找swiper.js官方文档,因为当时只是引用了swiper.js,而没有引入swiper.css和swiper.animate.js;

重新引入后,ok了,问题得到解决;

<link rel="stylesheet" href="../../styles/library/swiper.min.css" rel="external nofollow" />
<script src="../../scripts/common/swiper-3.3.1.min.js"></script>
<script src="../../scripts/common/swiper.animate.min.js"></script>

2,引入需要的文件后,发现ios和安卓浏览器是没有问题的,但是,安卓app里又出现问题了,来回切换不流畅,此时自己也是百度了一下,没有找到解决方法
最后还得看官方文档,查看属性和方法
解决方案:

 // 轮播图--左右滑动和切换
  var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    loop:false,
    mode: 'horizontal',
    freeMode:false,
    touchRatio:0.5,
    longSwipesRatio:0.1,
    threshold:50,
    followFinger:false,
    observer: true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents: true,//修改swiper的父元素时,自动初始化swiper
    onSlideChangeEnd:function(swiper){ // 当滑动结束后---月份日期切换同步左右左右切换
      changeMonth();
    }
  });

注意:初始化的时候添加的这几个属性,有不明白的可以查看官方文档;

温馨提示:swper.js我用的3xxx版本以上的,各个版本差别还是挺大的!

到此这篇关于Swiper.js插件超简单实现轮播图的文章就介绍到这了,更多相关Swiper.js 轮播图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-03-22

js实现从左向右滑动式轮播图效果

轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理 相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片. 点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#

JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&

js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

js实现点击左右按钮轮播图片效果实例

本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

js实现轮播图的完整代码

今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

原生js实现无限循环轮播图效果

知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

JS轮播图实现简单代码

本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

JS实现左右无缝轮播图代码

废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

原生js实现轮播图的示例代码

很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

用vue写一个仿简书的轮播图的示例代码

1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

原生js实现轮播图特效

轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理. ​ 3.图片播放的同时,下面小圆圈模块跟随一起变化. ​ 4.点击小圆圈,可以播放相应图片. ​ 5.鼠标不经过轮播图,轮播图也会自动播放图片. ​ 6.鼠标经过,轮播图模块, 自动播放停止. 此文章的代码为一个完整的轮播图的实现代码,复制即可运行 实现效果由于大小问题无法上传,可自行观看淘宝或京东首页轮

Vue中如何实现轮播图的示例代码

这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"

原生js实现轮播图

本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下 CSS: <style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif; } body { background: #eee; } #Bigbox { width: 720p

原生JS实现轮播图效果

学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的,也实现了无缝切换,还有一点问题就是没有加上图片切换的时候的延迟了. html: <div id="container"> <div id="list" style="left: -600px;"> <img src="../image/1.jpg" alt=&

js实现轮播图的两种方式(构造函数、面向对象)

本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 1.构造函数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type='text/css'> *{ margin:0; padding:0;} #wrap{ width:500px; height:360px; margin:1

使用Require.js封装原生js轮播图的实现代码

index.html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #banner{ width: 830px; he

原生JS实现旋转轮播图+文字内容切换效果【附源码】

废话不多说,直接上图看效果: 需求: 点击左右按钮实现切换用户图片与信息: 原理: 点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图片切换成对应的文字: 步骤: 1.让页面加载出所有盒子的样式: 2.把两侧按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转): 3.书写函数: 操作函数:左按钮:删除第一个,添加到最后一个: 右按钮:删除最后一个,添加到第一个: 4.定义变量,根据对应变量切换