jQuery implémente le défilement automatique des listes pour afficher les actualités dans une boucle_jquery

Les actualités (annonces, événements, images, etc.) doivent être affichées de manière circulaire dans une petite zone de la page, et le défilement doit s'arrêter et s'afficher lorsque la souris survole, et le défilement doit continuer après sortie.

Rendu :

Voici les trucs secs

html :

Copier le code Le code est le suivant :

• aaaaaaaaaaaaaa


• bbbbbbbbbbbbbbbb


• cccccccccccccccc


• dddddddddddddd


• eeeeeeeeeeeee


• ffffffffffffffff


• ggggggggggggggg

css :

Copier le code Le code est le suivant :

ui,li {
style de liste : aucun ;
>
#actualité{
hauteur : 75px ;
débordement : caché ;
>

La clé est le fichier js :

Copier le code Le code est le suivant :

$(fonction() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, fonction() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");

fonction scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight "px"
}, 600, fonction() {
$self.css({
margeHaut : 0
}).find("li:first").appendTo($self);
})
>
})

L'essentiel est de comprendre et d'utiliser les méthodes hover, setInterval, clearInterval, animate et l'attribut marginTop (marginLeft, top, left, etc.). Il est à noter que si vous n'ajoutez pas .trigger("mouseleave"), lorsque la page Web est initialisée, la liste ne défile pas et appendTo peut déplacer des éléments directement, c'est tout.