web-dev-qa-db-fra.com

faire défiler l'image avec le défilement continu à l'aide d'une balise Marquee

J'utilise une balise <Marquee> pour continuer à déplacer l'image horizontalement. Supposons que je dispose de 5 images qui se déplacent bien, mais qu’une fois le dernier mouvement d’image terminé, il reste un grand écart à parcourir pour commencer à faire défiler la première image. Comment puis-je gérer cela?

Mon code est quelque chose comme ça:

<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>
htmlimage
4
Dev

Marquee (<Marquee>) est une balise HTML obsolète et non valide. Vous pouvez utiliser de nombreux plugins jQuery à faire. L’un d’eux est jQuery News Ticker . Il y en a beaucoup plus!

2
Praveen Kumar Purushothaman

Vous ne pouvez pas faire défiler des images en continu à l'aide de la balise HTML Marquee. JavaScript doit être ajouté pour la fonctionnalité de défilement continu.

Un plugin JavaScript appelé crawler.js est disponible sur le forum du lecteur dynamique pour réaliser cette fonctionnalité. Ce plugin a été créé par John Davenport Scheuer et a été modifié au fil du temps pour s'adapter aux nouveaux navigateurs.

J'ai également implémenté ce plugin dans mon blog pour documenter toutes les étapes pour utiliser ce plugin. Voici l exemple de 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>

Voici la configuration du plugin:

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
});
2
user1537762

Essaye ça:

<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
perumal N

Je pense que vous définissez la largeur du rectangle en fonction de la largeur totale de 5 images. Ça fonctionne bien

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

0
ram