<!-- 点击切换引入 -->
<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. Spring发布WebService并调用已有的WebService

    发布WebService 1.编写生成WebService的Java类 package com.webService; import com.service.PianoServiceImpl; imp ...

  2. 基于MySql主从分离的代码层实现

    前言   该文是基于上篇<MySQL主从分离的实现>的代码层实现,所以本文配置的主数据库和从数据库的数据源都是在上篇博文中已经介绍了的. 动态选择数据源的配置   由于我们在写数据的时候需 ...

  3. Day01_mongoDB入门

    学于黑马和传智播客联合做的教学项目 感谢 黑马官网:http://www.itheima.com 传智播客官网:http://www.itcast.cn 微信搜索"艺术行者",关注 ...

  4. 线程_使用multiprocessing启动一个子进程及创建Process 的子类

    from multiprocessing import Process import os # 子进程执行的函数 def run_proc(name): print("子进程运行中,名称:% ...

  5. try{}catch的隐藏(如何优雅的实现异常块)

    在项目中,我们会遇到异常处理,对于运行时异常,需要我们自己判断处理.对于受检异常,需要我们主动处理. 但是繁琐的try{}caht嵌套在代码里,看着很不舒服,这里我们不讨论性能,就代码来讲,来看看如何 ...

  6. PHP array_intersect_assoc() 函数

    实例 比较两个数组的键名和键值,并返回交集: <?php$a1=array("a"=>"red","b"=>"g ...

  7. 7.12 NOI模拟赛 探险队 期望 博弈 dp 最坏情况下最优策略 可并堆

    LINK:探险队 非常难的题目 考试的时候爆零了 完全没有想到到到底怎么做 (当时去刚一道数论题了. 首先考虑清楚一件事情 就是当前是知道整张地图的样子 但是不清楚到底哪条边断了. 所以我们要做的其实 ...

  8. Linux的VMWare中Centos7的安装

    Windows平台下VMWare 14安装Centos 7 一.虚拟机硬件配置 1.选择创建新的虚拟机: 2.选择自定义(高级)进行自定义配置,单击下一步: 3.选择虚拟机硬件兼容性为默认,单击下一步 ...

  9. win10 安装tensorflow2.0 GPU版本遇到的坑

          背景:我的机器上tensorflow 1.14 & 2.0,这俩版本都有,之前都是用1.14版本,今天试一下2.0尝尝鲜, 结果就掉坑去了 把CUDA10.1 和 cudnn 安装 ...

  10. Linux下关闭防火墙

    1:查看防火状态 **systemctl status firewalld** **service iptables status** 2:暂时关闭防火墙 systemctl stop firewal ...