SliderBar4.0常用滑块滚动效果封装
SliderBar4.0常用滑块滚动效果封装
tianma3798 发表于2年前
SliderBar4.0常用滑块滚动效果封装
  • 发表于 2年前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: SliderBar4.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>

共有 人打赏支持
粉丝 3
博文 51
码字总数 14935
×
tianma3798
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: