jQuery图片文字无缝滚动插件YLMarquee
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍彦磊图片（文字）平滑连续滚动插件1.0, 该插件可用于实现图片或者文字平滑连续滚动效果。

使用方法：

使用前您一定要引入jQurey及本脚本

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/YLMarquee-1.1.min.js" type="text/javascript"></script>

1、为您要设置滚动的对象设置容器，并命名id，如id="scroll"

2、将您要滚动的对象置入ul中，并添加li标签，li标签中可以是图片、文字或表格……

<div id="scroll">
    <ul>
        <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>

3、在页面中添加jQuery语句，调用此插件，并对相关参数进行设置,如：

<script>
    $(function () {
        $("#scroll").YlMarquee({
            vertical: true,
            visible: 3
        });
    });
</script>

参数说明：

  • visible 页面可见元素（图片）个数，默认为 3，必须参数

  • step 滚动速度，整数，默认为 3，数值越大滚动速度越快；若为 0，则不滚动

  • vertical 滚动方向，有”true”（向上滚动）和”false”（向左滚动）两个参数，默认为 false

  • width 容器的宽度，不指定则由插件自动计算并覆盖 CSS 样式中的宽度（建议设置为 CSS 的宽度）

  • height 容器的宽度，不指定则由插件自动计算并覆盖 CSS 样式中的高度（建议设置为 CSS 的高度）

  • textMode 文字模式（默认为图片模式），当滚动内容为文字时，请指定为 true