<!-- 点击切换引入 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

var swiper = new Swiper('.swiper-container', { //swiper轮播图
  slidesPerView: 'auto',//则自动根据slides的宽度来设定数量
  centeredSlides: true,//active slide会居中,而不是默认状态下的居左
  slideToClickedSlide: true,//可以点击切换
  onlyExternal:true,//无法拖动
  initialSlide: self.hour_type, //设置为2后,Swiper初始化时activeSlide成了第三个
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  onTransitionEnd: function (swiper) {
    回调
  }
});

 

效果展示:http://www.superslide2.com/demo.html

SuperSlide轮播切换的更多相关文章

  1. SuperSlide轮播插件滚动高度或宽度不对的问题解决

    声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...

  2. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  3. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  4. 3D轮播切换特效 源码

    这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...

  5. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

  6. jQuery实现轮播切换以及将其封装成插件(3)

    在前两篇博文中,我们写了一个普通的轮播切换.但是我们不能每一次需要这个功能就把这些代码有重新敲一次.下面我们就将它封装成一个插件. 至于什么是插件,又为什么要封装插件,不是本文考虑的内容.  我们趁着 ...

  7. jQuery实现轮播切换以及将其封装成插件(2)

    在上一篇博文中,我们完成了一个简单的轮播切换.它的功能比较简单,仅仅能定时切换图片. 但是有没有这样一种情况.当我们特意的想看某一个轮播显示项时不希望等轮播一圈才能等到,希望通过图上的一些元素,触发某 ...

  8. jQuery实现轮播切换以及将其封装成插件(1)

    我们在网上经常会看到一些轮播切换的效果.轮播切换,就是在一个有限的空间中定时的像走马灯一样去播放一组图片,当然也可以通过鼠标悬停在小按钮上来切换显示.下面我们将一步一步的实现这一效果. 为保证效果,请 ...

  9. jQuery - 广告图片轮播切换

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

随机推荐

  1. C/C++编程笔记:C++入门知识丨继承和派生

    本篇要学习的内容和知识结构概览 继承和派生的概念 派生 通过特殊化已有的类来建立新类的过程, 叫做”类的派生”, 原有的类叫做”基类”, 新建立的类叫做”派生类”. 从类的成员角度看, 派生类自动地将 ...

  2. 6.10 省选模拟赛 小C的利是 高斯消元 矩阵行列式

    LINK:小C的利是 想起来把这道题的题解写了 .一个常识:利是在广东那边叫做红包. 关于行列式的题目 不过我不太会23333..口胡还是可以的. 容易想到10分的状压.不过没什么意思. 仔细观察要求 ...

  3. linux之DNS主域,从域,缓存服务器的架设

    DNS主域,从域,缓存服务器的架设 DNS域名系统 组织域 顶级域  域名解析过程迭代递归 DNS(Domain Name System ) 在Internet中使用IP地址来确定计算机的地址. 为了 ...

  4. HDU 6787 Chess 2020百度之星 初赛三 T5 题解 dp

    传送门:HDU 6787 Chess Problem Description 你现在有一个棋盘,上面有 n 个格子,格子从左往右,1,-,n 进行标号.你可以在棋盘上放置恰好 m 个传送器,并且对于每 ...

  5. ios_中将UITextField输入框设置为密码形式

    1.通过XIB方式实现: 将UITextField中的secure选项勾中即可. 2.通过代码实现: UItextField * test = [ UItextField alloc] init ]; ...

  6. mac 教你如何在Mac上搭建自己的服务器——Nginx

    WHAT 本篇主要是基于Nginx在Mac上搭建自己的服务器. 我相信很多朋友肯定是第一次听到Nginx,关于它具有怎样的传奇,这儿肯定说不完也说不透. 有兴趣的朋友可以自行google或者baidu ...

  7. 解读生成对抗网络(GAN) 之U-GAN-IT

    Unsupervised Generative Attentionnal Networks with Adapter Layer-In(U-GAN-IT) 从字面我们可以理解为无监督生成对抗网络和适配 ...

  8. 用python分析1225万条淘宝数据,终于搞清楚了我的交易行为

    大家好,我是黄同学

  9. 2020-07-22:你觉得使用redis的主从复制的时候有什么点需要注意的吗?

    福哥答案2020-07-22: 1.主从同步缓冲区设定大小,如果进行全量复制耗时太长,进行部分复制时发现数据已经存在丢失的情况,必须进行第二次全量复制,致使slave陷入死循环状态.在全量复制的时候, ...

  10. C#设计模式之21-策略模式

    策略模式(Stragety Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/427 访问. 策略模式属于 ...