使用字幕标签连续滚动滚动图像

我使用<marquee>标记来继续水平移动图像。假设我有5个图像，移动得很好，但在完成最后一个图像移动后，从第1个图像开始滚动有很大的差距。我该怎么办？

我的代码是这样的：

<marquee direction="right">
    <img src="images/a.jpg">
    <img src="images/a.jpg">
    <img src="images/a.jpg">
    <img src="images/a.jpg">
    <img src="images/a.jpg">
    <img src="images/a.jpg">
</marquee>

Marquee（<marquee>）是一个不推荐使用的HTML标记，不是有效的HTML标记。你可以使用许多jQuery插件来做这件事，其中之一就是jQuery News Ticker。还有更多！

您不能使用HTML字幕标记连续滚动图像-它必须添加JavaScript才能实现连续滚动功能。

动态驱动器论坛上有一个名为crawler.js的JavaScript插件可以实现这一功能。这个插件是由John Davenport Scheuer创建的，经过一段时间的修改以适应新的浏览器。

我还在博客中实现了这个插件，以记录使用这个插件的所有步骤。这是示例代码：

<head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="assets/js/crawler.js" type="text/javascript" ></script>
</head>
<div id="mycrawler2" style="margin-top: -3px; " class="productswesupport">
    <img src="assets/images/products/ie.png" />
    <img src="assets/images/products/browser.png" />
    <img src="assets/images/products/chrome.png" />
    <img src="assets/images/products/safari.png" />
</div>

以下是插件配置：

marqueeInit({
    uniqueid: 'mycrawler2',
    style: {
    },
    inc: 5, //speed - pixel increment for each iteration of this marquee's movement
    mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
    moveatleast: 2,
    neutral: 150,
    savedirection: true,
    random: true
});

我认为您设置了与5个图像总宽度相关的字幕宽度。运行良好

例如：<marquee style="width:700px"></marquee>

试试这个：

<marquee behavior="" Height="200px"  direction="up" scroll onmouseover="this.setAttribute('scrollamount', 0, 0);this.stop();" onmouseout="this.setAttribute('scrollamount', 3, 0);this.start();" scrollamount="3" valign="center">
    <img src="images/a.jpg">
        <img src="images/a.jpg">
        <img src="images/a.jpg">
        <img src="images/a.jpg">
        <img src="images/a.jpg">
        <img src="images/a.jpg">
    </marquee>

相关内容

最新更新

热门标签：