温故而知新 兼容性较强的轮播器superslide.js

官网:

http://www.superslide2.com/index.html

demo:

http://www.superslide2.com/demo.html

API:

http://www.superslide2.com/param.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({titCell:".unslider-nav ol",mainCell:".my-slider ul",easing:"swing",autoPage:true,effect:"left",autoPlay:false,scroll:1,trigger:"click"});
</script>
时间: 2024-08-08 13:07:35

温故而知新 兼容性较强的轮播器superslide.js的相关文章

UISCrollView —— 图片轮播器实现(三)——(第二讲)

1. 所用知识点 1> UIScrollView的基本属性,和UIPageControl设置,还有就是要用到NSTimer来定时实现UIScrollView的图片轮播 2> NSTimer简单介绍: 2.1  NSTimer叫做“定时器”,它的作用如下 * 在指定的时间执行指定的任务 * 每隔一段时间执行指定的任务 2.2  NSTimer简单使用: 1> 调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTimerWithTimeInterval:(NST

iOS开发那些事儿(一)轮播器

前言 市面上绝大部分的APP被打开之后映入眼帘的都是一个美轮美奂的轮播器,所以能做出一个符合需求.高效的轮播器成为了一个程序员的必备技能.所以今天的这篇博客就来谈谈轮播器这个看似简单的控件其中蕴含的道理. 正文  首先我们来分析一下该如何去实现一个类似下图的轮播器(图片数量.URL由服务器返回):   策略一:UIScrollView->UIImageView->NSTimer轮询 这算是常规的策略,但是如果仔细想想,如果服务器返回给你50图片是不是就需要创建50个UIImageView来做容

UISCrollView —— 图片轮播器封装实现(三)——(第三讲)

1.分析 利用xib布局,然后自定义一个UIView,解析xib,然后利用控制器传入数据,将其加载到控制器的view上展示即可 2. 程序结构 3. 代码具体实现 1>  xib文件 2>  创建类 XMGPageView,然后将其与xib文件关联,选中xib文件,然后设置下文中 " custom class " 为定义的类,让其来管理xib 1>    (如图,设置xib与类关联) 2>  XMGPageView.h 文件中,声明分页图片数组属性,及其一个快速

UIScrollView实现图片轮播器及其无限循环效果

图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @prop

轮播器

$(function () { //浏览器检测,判断是否是IE if(!+[1,]) { //alert("这是ie浏览器"); $('.new_Message').css('top', '14px'); //调整通知栏的位置 $('.stuUser').click(function () { if ($('.stuUser_ul ').css('display') == 'none') { $('.stuUser_ul ').css('display', 'block'); } el

Android高级图片滚动控件,编写3D版的图片轮播器

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧.那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧. 说 到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻.淘宝等.最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上 还增加了三维立体

ios开发图片轮播器以及定时器小问题

一:图片轮播器效果如图:能实现自动轮播,到最后一页时,轮播回来,可以实现拖拽滚动 二:代码: 1 #import "ViewController.h" 2 static CGFloat const imageCount = 5; 3 @interface ViewController ()<UIScrollViewDelegate> 4 /*scrollView*/ 5 @property (nonatomic,weak)UIScrollView *scroll; 6 /*

jQyery实现轮播器

看到各大网站上都有一个轮播器的效果,自己不禁也想做一个,查了资料,看了轮播器的原理,慢慢的试着做了做,最终效果勉勉强强 原理:如图,试想一下,若是将<ul>的width属性值设置的很宽,直到可以装下你所有的图片,而每一个图片又用<li>包着并且设置了左浮动. 那么当我们向左移动ul的时候并且移动的距离为<li>的宽度,第二个<li>不就被移动到了<div>的窗口,这样一来图片不就被一张一张显示出来了吗? 接下来我们在设置<div>的属

UIScorllView和UIPageControl的使用实现图片轮播器

首先我们要先建一个project,选择iOS下的第一个Application 中的Single View Application 开始工作已经准备完毕现在我们进入到Main.storyboard拖控件 需要用到的控件有 UIScrollView也就是滚动的那个 UIPageControl也就是图片下面那几个小点 NSTimer就是定时器让其自动换页的 第一步:拖控件连线 在Main.storyboard拖一个UIScrollView放在屏幕上,在UIScrollView下面放一个UIPageCo