文档章节

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
粉丝 2
博文 99
码字总数 27862
作品 0
济南
高级程序员
iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图

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

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

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

aicoder
01/03
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
jQuery全屏滚动插件FullPage.js中文帮助文档API

七牛最近改版了网站,弄成全屏滚动的特效,真的很炫,于是查看其源代码,发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很...

Jack088
2016/08/08
211
0

没有更多内容

加载失败,请刷新页面

加载更多

技术工坊|如何降低区块链应用的使用门槛(上海)

当区块链技术从专业研究走向市场应用,开发者需要考虑用户的使用场景和使用门槛,例如通过ETH支付gas手续费,或者注册一个16进制的用户名,普通用户都难以接受。 10月20日,HiBlock区块链社区...

HiBlock
22分钟前
1
0
Daemon线程--《Java并发编程的艺术》学习笔记

daemon线程即守护线程 当一个JVM中不存在非Daemon线程时,JVM将会退出 也就是说当非Daemon线程都执行完毕时,java程序也就结束了。 可以通过调用Thread.setDaemon(true)将线程设置为Daemon线...

karma123
28分钟前
0
0
scala类型参数的上界和下界

class Pair[T <: Comparable[T]](val first:T,val second:T) //类型T必须要是Comparable接口的子类(即T是Comparable的下界){ def bigger = if(first.compareTo(second) > 0) first e......

whoisliang
38分钟前
1
0
Vue中路由管理器Vue Router使用介绍(一)

一、在模块编程中安装VueRouter 1.Npm安装vue-router npm install vue-router 2.在main.js中引用并使用VueRouter import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(Vu......

tianma3798
40分钟前
1
0
TypeScript基础入门之声明合并(一)

转发 TypeScript基础入门之声明合并(一) 声明合并 介绍 TypeScript中的一些独特概念描述了类型级别的JavaScript对象的形状。 TypeScript特别独特的一个例子是"声明合并"的概念。 在使用现有J...

durban
54分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部