文档章节

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

tianma3798
 tianma3798
发布于 2015/12/15 15:04
字数 326
阅读 20
收藏 0
点赞 0
评论 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
博文 70
码字总数 20355
作品 0
济南
高级程序员
iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图

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

大学霸 ⋅ 2015/08/12 ⋅ 0

06-移动端开发教程-fullpage框架

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

aicoder ⋅ 01/03 ⋅ 0

OpenDigg iOS开源项目月报201704

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

OpenDigg ⋅ 2017/04/13 ⋅ 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 ⋅ 1

30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达 ⋅ 2012/08/04 ⋅ 0

jQuery全屏滚动插件FullPage.js中文帮助文档API

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

Jack088 ⋅ 2016/08/08 ⋅ 0

jQuery 滑块插件--Slider Pro

Slider Pro 是模块化的,响应式的和支持触摸的 jQuery 滑块插件,允许你创建优雅专业的演示滑块。在线演示 特性: 模块化架构 响应式 touch-swipe CSS3 切换 动画层(静态) 直观的滚动 旋转...

叶秀兰 ⋅ 2014/11/06 ⋅ 0

android ListView 九大重要属性详细分析

android ListView 九大重要属性详细分析 1.android ListView 一些重要属性详解,兄弟朋友可以参考一下。 首先是stackFromBottom属性,这只该属性之后你做好的列表就会显示你列表的最下面,值...

抉择很难 ⋅ 2015/12/24 ⋅ 0

15 个响应式的 jQuery 图像滑块插件

设计师和开发人员总是试图使用新技术让网站更智能,而我们发现在许多网站上 jQuery 的图像滑块插件是非常受欢迎的。本文继续介绍 15 个 jQuery 图像滑块插件以供您选择。 ELASTISLIDE – 响应...

oschina ⋅ 2012/05/26 ⋅ 5

8 个让人印象深刻的网站 JS 视觉效果

网页设计已经提升到一个整体新的水平,Flash 渐渐失去了地位,逐渐被 HTML/JavaScript/CSS 所超越,而且一样可以实现出 Flash 复杂的特效。 本文介绍 8 个让人印象深刻的网站视觉效果,这些效...

oschina ⋅ 2012/07/31 ⋅ 6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iExec Blockchain Marketplace for Cloud

iExec Releases the First-Ever Blockchain Marketplace for Trading Cloud Computing Berlin, Germany, May 29, 2018. iExec has released its blockchain-based decentralized cloud marke......

openthings ⋅ 17分钟前 ⋅ 0

OSChina 周二乱弹 —— 加班的代码不要枉费了我的童子功

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《29》- 未完成乐队 《29》- 未完成乐队 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :#看球提醒# 02:00 巴西v...

小小编辑 ⋅ 36分钟前 ⋅ 11

Docker Swarm的前世今生

概述 在我的《Docker Swarm集群初探》一文中,我们实际体验了Docker Swarm容器集群技术的魅力,与《Kubernetes实践录》一文中提到的Kubernetes集群技术相比,Docker Swarm没有Kubernetes显得...

CodeSheep ⋅ 今天 ⋅ 0

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 今天 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部