All geek questions in one place

Scrolling image with continuous scrolling using marquee tag

I use the <marquee> to continue moving the image horizontally. Suppose I have 5 images than the movement, but after the last move of the image is completed, there is a large gap to start scrolling from the 1st image. How can i do this?

My code is something like this:

 <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>
+4
source share
4 answers

Marquee ( <marquee> ) is an obsolete and invalid HTML tag. You can use many jQuery plugins. One of them is jQuery News Ticker . There are many more!

+2
source

You cannot scroll images continuously using the marquee HTML tag - it must have JavaScript to scroll continuously.

This forum has a crawler.js JavaScript plugin available on the dynamic disk forum. This plugin was created by John Davenport Scheyer and over time has been modified to fit new browsers.

I also embedded this plugin in my blog to document all the steps for using this plugin. Here is a 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 configuration:

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

I think you have set the selection width associated with the total width of 5 images. It works great

ex: <marquee style="width:700px"></marquee>

0
source

Try the following:

 <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>
0
source

Source: https://habr.com/ru/post/1432706/

More articles:


All Articles