jquery图片左右滚动 原创

所属分类:UI,媒体-滚动,幻灯片和轮播图

 72212  464  查看评论 (39)
分享到微信朋友圈
X
jquery图片左右滚动 原创 ie兼容6

插件参数:

$.fn.parallelRoll.defaults = {
    boxName: 'box',
    //最外层盒子类名
    tagName: 'dd',
    //滚动标签元素
    time: 3000,
    //滚动间隔时间
    direction: 'left',
    // 动方向  right-->向右    left-->向左
    visual: 7,
    //可视数
    prev: 'prev',
    //向上
    next: 'next',
    //向下
    amount: 1 // 滚动数  默认是1
};

html:

<div class="box">
    <span class="prev">
        上一张
    </span>
    <dl id="roll">
        <dd>
            <img src="images/1.jpg" />
        </dd>
        <dd>
            <img src="images/2.jpg" />
        </dd>
        <dd>
            <img src="images/3.jpg" />
        </dd>
        <dd>
            <img src="images/4.jpg" />
        </dd>
        <dd>
            <img src="images/5.jpg" />
        </dd>
        <dd>
            <img src="images/6.jpg" />
        </dd>
        <dd>
            <img src="images/7.jpg" />
        </dd>
        <dd>
            <img src="images/8.jpg" />
        </dd>
        <dd>
            <img src="images/9.jpg" />
        </dd>
        <dd>
            <img src="images/10.jpg" />
        </dd>
    </dl>
    <span class="next">
        下一张
    </span>
</div>

CSS:

.box {

    height: 100px;

    border: 1px solid red;

    overflow: hidden;

    width: 730px;

    margin: 0 auto;

    position: relative;

}

#roll {

    width: 200 % ;

}

#roll dd {

    width: 98px;

    height: 98px;

    border: 1px solid#00EE00;

    float: left;

    margin - right: 5px;

}

.box span {
    position: absolute;
    bottom: 40 % ;
    display: inline - block;
    width: 50px;
    text - align: center;
    cursor: pointer;
    background: red;
    z - index: 90;
    color: #fff;
}

.box.next {
    right: 0;
}


调用:

$(document).ready(function() {

    $("#roll").parallelRoll({

        amount: 2

    });

});
相关插件-滚动,幻灯片和轮播图

css3页面鼠标纵向滑动效果

css3页面鼠标纵向滑动效果
  滚动
 63686  483

jQuery鼠标滚屏锚点定位

利用mousewheel库实现滚屏事件,同时支持侧边栏控制
  滚动
 31666  392

jQuery全屏视差滚动效果

jQuery全屏视差滚动效果
  滚动
 44094  434

jQuery滚动收缩导航

jQuery滚动收缩导航
  滚动
 36660  373

讨论这个项目(39)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    。。。。 0
    2022/1/17 11:06:55
    . 0
    2019/2/26 9:49:36
    破晓的美 0
    2018/11/5 10:02:49
    谁可以发一份给我呢 852756001@qq.com 回复
    赤脚大仙和 0
    2018/7/17 13:39:16
    感觉不错。
        赤脚大仙和0
        2018/7/17 13:40:43
        感觉不错
    回复
    ?萧兮╃ 0
    2018/2/2 0:52:35

    这个怎么用呢 小白一只

        余生0
        2018/5/8 20:35:33
        下载 调用
    回复
    Warm star 0
    2017/12/1 17:52:42
    谁能告我怎么重复调用啊 回复
    坚持所坚持的 0
    2017/9/13 9:48:33
    Ericbob123 0
    2017/8/27 12:46:48

    功夫不负有心人,终于找到了。

    回复
    静。 0
    2017/7/28 10:03:20

    多次调用,我要怎么改呢。

        Warm star0
        2017/12/1 15:27:51
        感觉有点坑,不能多次调用,我也没有修改好
    回复
    勿忘初心 0
    2017/5/27 11:14:22

    不错,想试一下

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复