<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. 【转】java事件监听机制

    java中的事件机制的参与者有3种角色: 1.event object:事件状态对象,用于listener的相应的方法之中作为参数,一般存在与listerner的方法之中 2.event source ...

  2. Java反射机制能够获取的信息，与应用

    一.什么是Java反射机制? [1]反射机制是在运行状态中,对于任何一个类,都能够知道这个类的所有属性和方法: [2]对于任意一个对象,都能够调用它的任意一个属性和方法: 像这种动态获取类的信息以及动 ...

  3. Muduo阅读笔记---net（三）

    muduo-manual手册一开始就介绍了“Muduo是基于Reactor模式的网络库”,因此必须对Reactor模式有一定的了解才行:另外,文中还提到EventLoop,这些知识点我目前都不太了解.

  4. C++有符号和无符号数的转换

    本文转自:http://www.94cto.com/index/Article/content/id/59973.html 1.引例: 今天在做了一道关于有符号数和无符号数相互转换及其左移/右移的问题 ...

  5. Leetcode题解（20）

    59. Spiral Matrix II 题目 这道题copy网上的代码 class Solution { private: ][]; ][]; public: void dfs(int dep, v ...

  6. jQuery添加删除节点例子第十节"员工增删表"

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. Python学习--字典

    在Python中通过名字来引用值的数据结构称为映射(mapping).字典是Python中唯一内建(Python解释器本身支持,不需要import)的映射类型.字典中的值没有特殊的顺序,都存储在一个特 ...

  8. JS中有关数组Array的常用方法函数

    Array对象的方法主要有如下几种(我所知道的): concat()连接两个或多个数组,并返回结果,但是值得注意的是该方法并不改变数组本身,而仅仅返回一个数组连接的副本. push()在数组后面添加一 ...

  9. java面试扫盲：对象初始化顺序(真的未必能答对)

    记录下面试里面遇到的一些java盲区,一方面扫描自己的知识盲区,一方面也可以给后面面试的朋友一些警示,以免面试的时候出现不知道的尴尬情况. 提出问题:父类静态属性,父类属性,父类构造方法,子类静态属性 ...

  10. [转载] 常用 Java 静态代码分析工具的分析与比较

    转载自http://www.oschina.net/question/129540_23043 简介: 本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代 ...