温故而知新 兼容性较强的轮播器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 ...
随机推荐
- phpMyAdmin提示:配置文件权限错误,无法写入!解决方法
访问phpMyAdmin提示: 配置文件权限错误,无法写入! 解决办法: chmod -R 755 ./phpmyadmin 这样设置下phpMyAdmin目录权限属性为就可以访问了.原来phpMyA ...
- Node.js与Express4安装与配置
Nodejs简介 Node.js 基于 Chrome JavaScript 运行环境,用于便捷地搭建快速.可扩展的网络应用. 它使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效, 非常适合 ...
- Ural 1057 Amount of Degrees
Description 问[L,R]中有多少能表示k个b次幂之和. Sol 数位DP. 当2进制时. 建出一个二叉树, \(f[i][j]\) 表示长度为 \(i\) 有 \(j\) 个1的个数. 递 ...
- 【krpano】浏览点赞插件1.1(源码+介绍+预览)
插件使用说明详见:http://www.cnblogs.com/reachteam/p/5479068.html 插件更新 1.新增测试模式 用户可以使用uid="test"进行本 ...
- Spark集群部署
Spark是通用的基于内存计算的大数据框架,可以和hadoop生态系统很好的兼容,以下来部署Spark集群 集群环境:3节点 Master:bigdata1 Slaves:bigdata2,bigda ...
- OC编程之道-创建对象之单例模式
一 何为单例singleton模式?(what) 保证一个类只有一个实例,并提供一个访问它的全局访问点. 二 何时使用单例模式?(where) 1类只能有一个实例,而且必须从一个为人熟知的访问点对其访 ...
- iOS开发UI篇—CAlayer(创建图层)
iOS开发UI篇—CAlayer(创建图层) 一.添加一个图层 添加图层的步骤: 1.创建layer 2.设置layer的属性(设置了颜色,bounds才能显示出来) 3.将layer添加到界面上(控 ...
- 解决JettyMavenPlugin: Failed to load class "org.slf4j.impl.StaticLoggerBinder"
<dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-log4j12</arti ...
- springBoot专题3---->springBoot与多数据源的配置
最近有点忙,更新有点慢.今天进来说说一说springBoot中如何配置多数据源. 第一,新建一个名为springBoot-mutidata的maven项目,完整的pom.xml配置如下: <?x ...
- C++ 基础知识复习(六)
操作系统部分: 79. 操作系统的最小调度单位:线程. 线程thread,进程process.一个进程至少包含一个线程,主线程,main thread. 80. 资源的最小单位是:进程. 81. 进程 ...