Html 使用选取框标签连续滚动滚动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12298975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scroll image with continuous scrolling using marquee tag
提问by Dev
I am using a <marquee>tag for continues moving of image horizontally. Suppose I have a 5 images than it moving fine but after completion of last image move there is a big gap to start scrolling from 1 st image.How can i mange this?
我正在使用<marquee>标签继续水平移动图像。假设我有 5 个图像，但它移动得很好，但是在完成最后一个图像移动后，从第 1 个图像开始滚动有很大的差距。我该如何处理？
My code is some thing like that:
我的代码是这样的：
<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>
回答by Praveen Kumar Purushothaman
Marquee (<marquee>) is a deprecated and not a valid HTML tag. You can use many jQuery plugins to do. One of it, is jQuery News Ticker. There are many more!
Marquee ( <marquee>) 是一个已弃用且无效的 HTML 标记。您可以使用许多 jQuery 插件来完成。其中之一是jQuery News Ticker。还有很多！
回答by user1537762
You cannot scroll images continuously using the HTML marquee tag - it must have JavaScript added for the continuous scrolling functionality.
您不能使用 HTML marquee 标签连续滚动图像 - 它必须添加 JavaScript 以实现连续滚动功能。
There is a JavaScript plugin called crawler.jsavailable on the dynamic drive forum for achieving this functionality. This plugin was created by John Davenport Scheuer and has been modified over time to suit new browsers.
动态驱动论坛上有一个名为crawler.js的 JavaScript 插件可用于实现此功能。这个插件由 John Davenport Scheuer 创建，并随着时间的推移进行了修改以适应新的浏览器。
I have also implemented this plugin into my blog to document all the steps to use this plugin. Here is the sample code:
我还在我的博客中实现了这个插件，以记录使用这个插件的所有步骤。这是示例代码：
<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>
Here is the plugin configration:
这是插件配置：
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
});
回答by perumal N
Try this:
尝试这个：
<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>
回答by ram
I think you set the marquee width related to 5 images total width. It works fine
我认为您设置了与 5 个图像总宽度相关的选取框宽度。它工作正常
ex: <marquee style="width:700px"></marquee>
前任： <marquee style="width:700px"></marquee>
