<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. CentOS7安装GitLab、汉化及使用

    同步首发:http://www.yuanrengu.com/index.php/20171112.html 一.GitLab简介 GitLab是利用Ruby On Rails开发的一个开源版本管理系统 ...

  2. 开源纯C#工控网关+组态软件(五)从网关到人机界面

    一.   引子 之前都在讲网关,不少网友关注如何实现界面.想了解下位机变量变化,是怎样一步步触发人机界面动画的. 这个步步触发,实质上是变量组(Group)的批量数据变化(DataChange)事件, ...

  3. centos 下安装jdk、tomcat 以及tomcat无法从外部访问的解决办法

    centos 下安装jdk.tomcat 以及tomcat无法从外部访问的解决办法 原创 2014年08月28日 10:24:33 标签: selinux enforce cent 2223 昨天在c ...

  4. html5页面实现点击复制功能

    在实际工作中,有时候会遇到这样的需求,页面上有一个链接,不需要选中链接内容,只需要点击复制按钮,就可以把链接内容复制到剪切板.这时候可以使用clipboard插件来实现.以下是一个简单的demo. 首 ...

  5. !DOCTYPE 文档类型声明

      1.用途 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档.HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 H ...

  6. CSS fliter

    Filters主要是运用在图片上,以实现一些特效.(也能运用于video上),类似滤镜效果   img {         -webkit-filter:grayscale(1); }      gr ...

  7. MySQL服务相关

    1.管理员身份运行cmd方法: 在C:\Windows\System32\cmd.exe右键以管理员身份运行 2.查看MySQL服务选项(路径:任务管理器-服务tab-选中任一服务点击打开服务-进入服 ...

  8. NFC (Near Filed Communication)

    NFC的用途:近场通信(Near Field Communication,NFC),又称近距离无线通信,是一种短距离的高频无线通信技术,允许电子设备之间进行非接触式点对点数据传输(在十厘米内)交换数据 ...

  9. Winform界面中主从表编辑界面的快速处理

    在Winform开发中,我们往往除了常规的单表信息录入外,有时候设计到多个主从表的数据显示.编辑等界面,单表的信息一般就是控件和对象实体一一对应,然后调用API保存即可,主从表就需要另外特殊处理,本随 ...

  10. linux expect自动登陆远程服务器 批量管理服务器

    #!/usr/bin/expect set ipaddress [lindex $argv 0] set passwd [lindex $argv 1] set timeout 3 spawn ssh ...