温故而知新 兼容性较强的轮播器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 ...
随机推荐
- redis该如何分区-译文(原创)
写在最前,最近一直在研究redis的使用,包括redis应用场景.性能优化.可行性.这是看到redis官网中一个链接,主要是讲解redis数据分区的,既然是官方推荐的,那我就翻译一下,与大家共享. P ...
- python基础五
列表生成式 将列表data=[1,2,3]里的元素都乘2 方法一 data=[1,2,3] for index,i in enumerate(data): data[index] *=2 print( ...
- jquery写简单的div切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jstl core 库 之 out set remove
jstl 核心库 out标签 out:输出的标签 * value :输出的值 * default :默认值 * escapeXml :是否转移 默认为true(转义) 代码: <!-- 输出常量 ...
- loadrunner11录制无法打开IE浏览器
安装loadrunner折腾了很久,后来发现是ghost系统问题.重装了系统,再重装了自己需要用的工具~ 接着学习loadrunner,一边看帮助文档一遍学.可是为嘛按照帮助文档的步骤来,就是会碰到一 ...
- 6.openstack之mitaka搭建网络节点
部署网络服务 一:控制节点配置 1.建库建用户 mysql -u root -p CREATE DATABASE neutron; GRANT ALL PRIVILEGES ON neutron.* ...
- c语言libcurl库的异步用法
multi接口的使用会比easy 接口稍微复杂点,毕竟multi接口是依赖easy接口的,首先粗略的讲下其使用流程:curl_multi _init初始化一个multi curl对象,为了同时进行多个 ...
- 集合List内容
集合List内容 这次我们学习的主要内容为:集合框架 List 一 集合框架介绍 List集合与数组的区别: 不同点:1> 数组的长度在使用前必须确定,一旦确定不能改变.而List集合长度 ...
- 【python】确保文件写入结束
今天遇到了个问题: 我在执行如下代码时发现,文件只写了一半.也就是说,当文件量过大时,下面的代码是不能保证文件被正确写入的. fd = open('test.txt','w') fd.write(&q ...
- SQL查询语句行转列横向显示
http://blog.163.com/dreamman_yx/blog/static/26526894201121595846270/