温故而知新 兼容性较强的轮播器superslide.js
官网:
http://www.superslide2.com/index.html
demo:
http://www.superslide2.com/demo.html
API:
http://www.superslide2.com/param.html
最新版2.1.2 增加了响应式轮播
增加参数设置 vis:"auto",仅适应于:scroll:1, effect:"left或leftLoop"情况
http://www.superslide2.com/SuperSlide.2.1.2/demo.html
个人实战
<!--banner轮播图-->
<div class="site-banner">
<div class="my-slider">
<ul>
<li class="my-slider-li my-slider-li-1"></li>
<li class="my-slider-li my-slider-li-2"></li>
<li class="my-slider-li my-slider-li-3"></li>
<li class="my-slider-li my-slider-li-4"></li>
<li class="my-slider-li my-slider-li-5"></li>
</ul>
<a class="unslider-arrow next"></a>
<a class="unslider-arrow prev"></a>
</div>
<div class="unslider-nav">
<ol class="num"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol>
</div>
</div> <script type="text/javascript">
$(".site-banner").slide({delayTime:400,interTime:4000,titCell:".unslider-nav ol",mainCell:".my-slider ul",easing:"swing",autoPage:true,effect:"leftLoop",autoPlay:true,vis:"auto",scroll:1,trigger:"click"});
</script>
温故而知新 兼容性较强的轮播器superslide.js的更多相关文章
- iOS开发那些事儿(一)轮播器
前言 市面上绝大部分的APP被打开之后映入眼帘的都是一个美轮美奂的轮播器,所以能做出一个符合需求.高效的轮播器成为了一个程序员的必备技能.所以今天的这篇博客就来谈谈轮播器这个看似简单的控件其中蕴含的道 ...
- 图片轮播器bcastr4.swf“&”符号的问题
bcastr4.swf是一个很不错的网页图片轮播器,我一直使用它作为网站首页图片轮播的控件. http://xiaogui.org/bcastr-open-source-flash-image-sil ...
- UIScrollView实现图片轮播器及其无限循环效果
图片轮播器: 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...
- jQyery实现轮播器
看到各大网站上都有一个轮播器的效果,自己不禁也想做一个,查了资料,看了轮播器的原理,慢慢的试着做了做,最终效果勉勉强强 原理:如图,试想一下,若是将<ul>的width属性值设置的很宽,直 ...
- IOS第六天(3:scrollView 图片轮播器)
IOS第六天(3:scrollView 图片轮播器) #import "HMViewController.h" #define kImageCount 5 @interface H ...
- ios之无限 自动 图片轮播器的实现
比较之前发布的手动无限图片轮播器进行了改进.实现了自动无限轮播的功能.比较适合团购标题分类下面的轮播器功能. 实现思路: * 开启一个定时器,把操作放入消息循环池.每隔一定时间,操作执行一次. * 注 ...
- ios 学习 广告图片轮播器
// // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...
- swift:创建滚动视图的图片轮播器
用swift创建图片轮播器和用OC创建的方式是一样的,都主要用到UIScrollView和UIImageview这两个控件,有几张图片,就将滚动视图的内容区域大小设置为每一张图片的大小乘以张数即可.然 ...
- JavaScript图片轮播器
先贴上html的代码 <div class="ImgDiv"> <div class="Imgs" id="imgScroll&qu ...
随机推荐
- 微信公众平台可通过UnionID机制在多公众号间帐号互通
微信公众平台越来越注重开发者的反馈信息了,这不,微信开放平台提供了UnionID机制,通过获取用户基本信息接口,开发者可通过OpenID来获取用户基本信息,而如果开发者拥有多个公众号,可使用以下办法通 ...
- PHP如何快速读取大文件
在PHP中,对于文件的读取时,最快捷的方式莫过于使用一些诸如file.file_get_contents之类的函数,简简单单的几行代码就能 很漂亮的完成我们所需要的功能.但当所操作的文件是一个比较大的 ...
- Android 图片滤镜工具——高斯模糊
===================高斯模糊========================= 创建一个 ImageFilter 类(滤镜工具),代码如下: import android.graph ...
- proj.4投影变换图示
- Qt StyleSheet皮肤css源码
使用方式如下 //设置皮肤样式 static void SetStyle(const QString &styleName) { QFile file(QString(":/imag ...
- 在虚拟机下安装hadoop集成环境(centos7+hadoop-2.6.4+jdk-7u79)
[1]64为win7系统,用virtualbox建立linux虚拟机时,为什么没有64位的选项? 百度 [2]在virtualbox上安装centos7 [3]VirtualBox虚拟机网络环境解析和 ...
- git workflow
1) fork map-matcher.git repo 2) add ssh-keygen public key to gitlab 3) clone repo git clone git@git. ...
- MySQL 慢查询日志分析及可视化结果
MySQL 慢查询日志分析及可视化结果 MySQL 慢查询日志分析 pt-query-digest分析慢查询日志 pt-query-digest --report slow.log 报告最近半个小时的 ...
- Bootstrap3 CSS样式基本用法总结
按钮 a,input,button都可以设置为按钮 a标签按钮 button标签按钮 <a class="btn btn-default" href="#&qu ...
- Spring的jdbcTemplate查询执行原生sql
在spring与hibernate整合时进行数据库检索,执行原生sql: public AppointmentEvaluateVo searchMyfeedbackDetail(String acco ...