推荐一款带暂停功能的轮播组件,不要谢我,我叫红领巾!

简介:

 

正文

前言:关于轮播组件,那肯定是一搜一大把,实在不行自己写貌似也不难。最近博主在项目中用到一款轮播组件,功能齐全,可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能,在此推荐给大家,供大家参考。相信有你需要的效果。

本文原创地址:http://www.cnblogs.com/landeanfen/p/6054660.html

一、效果展示

多说无益,来看一组效果展示图,感受一下!

1、先跟大家见个面,打个招呼

2、什么?切换太慢了?好,加快速度!

3、加入其他功能

4、图片太小,看不出效果?好,那来个大图感受下!

 

5、如果你不想要右上角的小图标,照样可以。

 6、如果你对上述滑动效果不满意,组件提供了其他几种图片切换方式

淡入淡出

水平滑动

7、最后来个图片定位

 

二、组件介绍

Orbit是一款github上面的开源组件,需要jquery的支持,开源地址

三、代码示例

它的使用也是相当简单,首先下载源码,引用需要的组件到页面里面来。

      <link href="~/Content/orbit-master/orbit-1.3.0.css" rel="stylesheet" />

     <script src="~/Content/jquery-1.9.1.js"></script>
        <script src="~/Content/orbit-master/jquery.orbit-1.3.0.js"></script>

然后htmll代码如下

复制代码
    <div class="container">
            <div id="featured">
                <img src="/Content/image/Logo/1.jpg" data-caption="#htmlCaption1" />
                <img src="/Content/image/Logo/2.jpg" data-caption="#htmlCaption2" />
                <img src="/Content/image/Logo/3.jpg" data-caption="#htmlCaption3" />
                <img src="/Content/image/Logo/4.jpg" data-caption="#htmlCaption4" />
                <img src="/Content/image/Logo/5.jpg" data-caption="#htmlCaption5" />
                <img src="/Content/image/Logo/6.jpg" data-caption="#htmlCaption6" />
                <img src="/Content/image/Logo/7.jpg" data-caption="#htmlCaption7" />
            </div>

            <!-- Captions for Orbit -->
            <span class="orbit-caption" id="htmlCaption1"><strong>1</strong></span>
            <span class="orbit-caption" id="htmlCaption2"><strong>2</strong></span>
            <span class="orbit-caption" id="htmlCaption3"><strong>3</strong></span>
            <span class="orbit-caption" id="htmlCaption4"><strong>4</strong></span>
            <span class="orbit-caption" id="htmlCaption5"><strong>5</strong></span>
            <span class="orbit-caption" id="htmlCaption6"><strong>6</strong></span>
            <span class="orbit-caption" id="htmlCaption7"><strong>7</strong></span>
        </div>
复制代码

这都是固定结构,div里面的id="featured"用于初始化组件

最后js初始化

        <script type="text/javascript">
            $(function () {
                $('#featured').orbit();
            });
        </script>

以上简单代码就完成了上述实例图片3的效果。是不是很easy!

1、初始化常用属性介绍

上述通过简单的代码就可以完成我们组件的初始化,其实初始化方法 $('#featured').orbit(); 并不是固定,它可以传入多个参数,实现不同的轮播效果。由于该组件文档并不是非常齐全,这些属性都是通过查看源码找到的,以下博主就根据自己的一些尝试和理解介绍一些常用的初始化属性。

  1. advanceSpeed属性用于设置图片的切换时间,默认值是4000,单位是毫秒。
  2. timer属性用于控制是否启动开始暂停功能,就是我们右上角的那个小图标,原来就是通过它来控制的。默认true(开启)。
  3. animation属性用于控制图片切换的动画效果,可用的选项有fade(淡入), horizontal-slide(垂直滑动), vertical-slide(水平滑动), horizontal-push, vertical-push总共5种。
  4. captions属性表示是否启用图片标题。
  5. captionAnimation属性用于控制标题的切换动画。
  6. directionalNav属性控制是否启用上一页、下一页按钮功能。
  7. 其他更多初始化属性可以自行查看源码:

最终的用法如下:

复制代码
          $('#featured').orbit({
                    //advanceSpeed: 4000,//图片切换时间
                    //timer:false,       //是否启动开始暂停功能
                    //animation: 'fade', //动画效果:有fade(淡入), horizontal-slide(垂直滑动), vertical-slide(水平滑动), horizontal-push, vertical-push
                    //captions: false,    //是否启用标题
                    //captionAnimation: 'slideOpen',  //标题动画
                    //directionalNav: false,//是否启用上一页、下一页功能
                });
复制代码

2、组件常用方法和事件解析

除了初始化的属性之外,组件还提供了多个事件供我们调用。查看组件源码可以看到如下几句:

这个表示给当前标签绑定了上述一些事件。我们如何使用它们呢。比如上文博主使用的定位图片的功能,我们可以这么写。

$("#featured").trigger('orbit.goto', 3);//定位到第四张图片。注意这里的索引是从0开始。
$('#featured').trigger('orbit.stop');//停止图片轮询
$('#featured').trigger('orbit.start');//启用图片轮询

当然,还有他们的像orbit.next、orbit.prev这些事件应该也很好理解,就表示切换到下一张和上一张图片。

四、总结

好了,很简单的一个东西,这里就介绍完了,希望对你有用。

如果你觉得本文能够帮助你,可以右边随意 打赏 博主,也可以 推荐 进行精神鼓励。你的支持是博主继续坚持的不懈动力。





本文转自懒得安分博客园博客,原文链接:http://www.cnblogs.com/landeanfen/p/6054660.html,如需转载请自行联系原作者

目录
相关文章
|
1月前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
|
1月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 上拉触底(二十六)
【微信小程序】-- 页面事件 - 上拉触底(二十六)
|
1月前
|
数据库
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
133 0
|
7月前
|
存储
SwiftUI动画进阶,仿购票平台App行程目的地互换动效
SwiftUI动画进阶,仿购票平台App行程目的地互换动效
59 0
上下轮流滚动公告代码
上下轮流滚动公告代码
无限滚动-放上暂停滚动jsdemo效果示例(真理)
无限滚动-放上暂停滚动jsdemo效果示例(真理)
|
JSON 小程序 前端开发
微信小程序--》小程序全局配置和详解下拉刷新和上拉触底页面事件
⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。
511 0
微信小程序--》小程序全局配置和详解下拉刷新和上拉触底页面事件
|
小程序 API
零基础学小程序007----首页轮播图,可以自动轮播,循环轮播,定时轮播
零基础学小程序007----首页轮播图,可以自动轮播,循环轮播,定时轮播
|
移动开发 前端开发
【H5 音乐播放实例】第五节 音轨制作
【H5 音乐播放实例】第五节 音轨制作
107 0
|
移动开发 前端开发
【H5 音乐播放实例】第六节 其他
【H5 音乐播放实例】第六节 其他

热门文章

最新文章