<html>

<head>

    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">

    <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>

　　<!-- 覆盖默认切换效果 为匀速 -->

　　<style>

        /*插件外层容器 用来定义宽高等其他样式*/

        .swiper-container{

            width: 600px;

            height: 300px;

        }

        /*插件的wrapper 这是关键， 覆盖插件默认切换效果为匀速*/

　　　　 .swiper-wrapper{

    　　　　 transition-timing-function: linear;

　　　　 }

　　</style>

</head>

<body>

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide">Slide 1</div>

            <div class="swiper-slide">Slide 2</div>

            <div class="swiper-slide">Slide 3</div>

            <div class="swiper-slide">Slide 4</div>

            <div class="swiper-slide">Slide 5</div>

            <div class="swiper-slide">Slide 6</div>

            <div class="swiper-slide">Slide 7</div>

        </div>

    </div>

    <script>

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

        autoplay:1,//自动滚动

        loop:true,//循环

        speed:5000,//滚动速度

        slidesPerView : 4,//slide可见数量

        spaceBetween : 10//slide之间的距离（单位px）

    })

    </script>

</body>

</html>

swiper3插件无缝滚动配置的更多相关文章

  1. liMarquee – jQuery无缝滚动插件（制作跑马灯效果）

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  2. 自己编写jQuery插件 之 无缝滚动

    一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2&l ...

  3. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

  4. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

  5. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. 一个文字无缝滚动的jQuery插件

    直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  7. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  8. Nginx插件之openresty反向代理和日志滚动配置案例

    Nginx插件之openresty反向代理和日志滚动配置案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.openresty介绍 1>.Nginx介绍 Nginx是一款 ...

  9. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

随机推荐

  1. Callback 与 Promise 间的桥梁 —— promisify

    作者:晃晃 本文原创,转载请注明作者及出处 Promise 自问世以来,得到了大量的应用,简直是 javascript 中的神器.它很好地解决了异步方法的回调地狱.提供了我们在异步方法中使用 retu ...

  2. angular控制器常用的4种通信方式

    首先概括一下angular控制器通信的4种方式: 作用域继承. 通过$scope广播事件. 事件发射器模块. 服务. 1.作用域的继承 子作用域可以访问声明在它们的祖先作用域中的变量和函数. < ...

  3. c语言的，三个工具可以使编译器生成性能更佳的代码。

    内联函数声明inline 函数有时可以非常短.短函数的每次调用可以用实现该函数功能的内联代码替代,以提高执行性能.意味着不需要给函数传递或返回一个值,要让编译器采用这种技术,可以把短函数指定为inli ...

  4. vue2.0实现在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  5. POJ2318 TOYS(叉积判断点与直线的关系+二分)

    Calculate the number of toys that land in each bin of a partitioned toy box. Mom and dad have a prob ...

  6. .NET Core跨平台的奥秘[上篇]：历史的枷锁

    微软推出的第一个版本的.NET Framework是一个面向Windows桌面和服务器的基础框架,在此之后,为此微软根据设备自身的需求对.NET Framework进行裁剪,不断推出了针对具体设备类型 ...

  7. 【翻译】.Net Core的意义

    想要了解.Net Core的意义,就必须要了解拥有很长历史的.Net Framework,.Net Framework1.0于2002年发布.从那开始,每隔两年就会有一个主版本推出.伴随着Visual ...

  8. 使用NPOI导出导入导出Excel

    Excel2003 #region Excel2003 /// <summary> /// 将Excel文件中的数据读出到DataTable中(xls) /// </summary& ...

  9. [array] leetCode-4-Median of Two Sorted Arrays-Hard

    leetCode-4-Median of Two Sorted Arrays-Hard descrition There are two sorted arrays nums1 and nums2 o ...

  10. How to set up Dynamics CRM 2011 development environment

    Recently I have been starting to learn Microsoft Dynamics CRM 2011 about implement plugin and workfl ...