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

最新推荐文章于 2023-07-03 10:02:53 发布

weixin_34349320

最新推荐文章于 2023-07-03 10:02:53 发布

阅读量162

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/tianma3798/blog/544568

版权

2019独角兽企业重金招聘Python工程师标准>>>

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>