<!-- 点击切换引入 -->
<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. logrotate nginx日志切割

    1.安装 centos: yum -y install logrotate ubuntu: apt-get install -y logrotate 2. 配置文件 /etc/logrotate.co ...

  2. PHP symlink() 函数

    定义和用法 symlink() 函数创建一个从指定名称连接的现存目标文件开始的符号连接. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE. 语法 symlink(target,link) ...

  3. PHP zip_entry_close() 函数

    定义和用法 zip_entry_close() 函数关闭由 zip_entry_open() 函数打开的 zip 档案.高佣联盟 www.cgewang.com 语法 zip_entry_close( ...

  4. CF掉分日记 6.6 6.8

    ---恢复内容开始--- 写的效果依旧不好 还没写完前四题比赛就结束了 而且这些普及组的题目 我大多还是缺少简单算法的灵性 总是把问题搞复杂化. 6.5 A 第一道题非常水 简单分析发现是一个快速幂的 ...

  5. 关于ORACLE索引的几种扫描方式

    ------------恢复内容开始------------ ------------恢复内容开始------------ 一条sql执行的效率因执行计划的差异而影响,经常说这条sql走索引了,那条s ...

  6. MySQL一主多从配置和读写分离配置

    一.一主多从配置 此次操作实现的是一主两从的方式.主服务器slave2(2.100),从服务器slave2-1(2.107),slave2-2(2.108);第一:准备主数据库    1. 在不同的机 ...

  7. zabbix监控配置一般流程

    目录 zabbix监控配置流程 1. 配置客户端 2. 配置监控 2.1 创建主机组 2.2 添加主机并加入主机组 2.3 添加监控项 2.3.1 模板的方式(不用添加触发器) 2.3.2 手动添加的 ...

  8. [转]HashMap详解

    转自微信公众号  安琪拉的博客 1. HashMap的内部数据结构? JDK1.8版本的,内部使用数组 + 链表 / 红黑树:数据结构如下图: 2. HashMap的数据插入原理吗? 1.判断数组是否 ...

  9. 15 张精美动图全面讲解 CORS

    前言: 本文翻译自 Lydia Hallie 小姐姐写的

  10. centos,linux环境下安装JDK1.8完整

    进入oracle官网下载安装包,cetos一般选择xx-xx-linux-x64.tar.gz.获取到地址后可以点击下载,也可以使用wget命令下载. 在得到下载好的文件后下面就可以开始安装了.比如我 ...