文档章节

SliderBar4.0常用滑块滚动效果封装

tianma3798
 tianma3798
发布于 2015/12/15 15:04
字数 326
阅读 20
收藏 0

GitHub下载地址:

https://github.com/tianma3798/SliderBar4.0

基于html4.0 常用滑块滚动效果简单封装

/*
* 简单滑块切换 4.0
*/
/*
*1.取消 多滑块功能
*2.代码重构
*3.添加上下切换方式
*4.添加无间隙 滚动方式,设置滑块标示js生成
*5.添加是否总是显示按钮‘alwaysShowBtn’=false
*6.修改渐变显示的链接bug
*/

一。默认样式

<div id="sliderOne" class="sliderBar" data-index="0">
    <div class="sliderContainer">
        <ul class="slider">
            <li>
                <img src="../Images/1.jpg" />
            </li>
            <li>
                <img src="../Images/2.jpg" />
            </li>
            <li>
                <img src="../Images/3.jpg" />
            </li>
            <li>
                <img src="../Images/4.jpg" />
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    //*********************3.0  添加无间隙滚动 显示 3条*****************
    $('#sliderOne').sliderBar({
        containerWidth: 900,
        containerHeight: 200,
        itemWidth: 300,
        itemHeight: 200,
        displayCount: 3,
        showBtn: true,
        loopRun: true,
        autoRun: false,
        autoRunTime: 2000,
        markingType: 'circle',
        //showType: 'vertical'  //指定上下滚动,还是左右滚动
        showType: 'horizontal',
        runType: 'gapless'
    });
</script>

二。纵向滚动

<div id="sliderOne" class="sliderBar"  style="border:1px solid red;background:gray;margin-top:50px;">
    <div class="sliderContainer">
        <ul class="slider">
            <li>
                <img src="../Images/1.jpg" />
            </li>
            <li>
                <img src="../Images/2.jpg" />
            </li>
            <li>
                <img src="../Images/3.jpg" />
            </li>
            <li>
                <img src="../Images/4.jpg" />
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    //*********************4.0 上下滚动*****************
    $('#sliderOne').sliderBar({
        containerWidth: 600,
        containerHeight: 300,
        itemWidth: 600,
        itemHeight: 300,
        displayCount: 1,
        showBtn: true,
        loopRun: true,
        autoRun: true,
        autoRunTime: 1000,
        markingType: 'circle',
        showType: 'vertical'  //指定上下滚动,还是左右滚动
    });
</script>

© 著作权归作者所有

共有 人打赏支持
tianma3798
粉丝 9
博文 113
码字总数 31566
作品 0
济南
高级程序员
私信 提问
iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图

iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图 使用ios9中的开关、滑块控件 开关和滑块也是用于和用户进行交互的控件。本节将主要讲解这两种控件。 ios9开关 开关控件常用来控制某个...

大学霸
2015/08/12
0
0
06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比...

aicoder
01/03
0
0
FullPage.js全屏插件文档及使用方法

简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站 下载地址 下载地址 相关示例:基于fullpage.js实现的360全屏滑动效果 支持功能 支持鼠标滚动 支持前...

哈你真皮
11/15
0
0
OpenDigg iOS开源项目月报201704

由OpenDigg 出品的iOS开源项目月报第一期来啦。我们的iOS开源月报集合了OpenDigg一个月来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等。 Transition 构建iOS...

OpenDigg
2017/04/13
0
0
转 整屏滚动效果插件 fullpage详解

1、引用文件 [html] view plaincopyprint? <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></scri......

大叔做web前端
2014/04/28
0
1

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
10
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
17
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
17
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
8
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部