Code d'effet de défilement d'image JS très lisse, boucle sans couture, vitesse personnalisable, s'arrêter lorsque la souris oscille. Sa fonctionnalité est la séparation de JS et d'adresses d'image.
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<Title> Picture Scroll </TITME>
</ head>
<body>
<style type = "text / css">
<! -
#demo {
Contexte: #FFF;
débordement: caché;
Border: 1px en pointillé #ccc;
Largeur: 500px;
}
#demo img {
Border: 3px solide # f2f2f2;
}
#Indemo {
flottant: à gauche;
Largeur: 800%;
}
# Demo1 {
flottant: à gauche;
}
# Demo2 {
flottant: à gauche;
}
->
</ style>
<div id = "Demo">
<div id = "indemo">
<div id = "Demo1">
<a href = "#"> <img src = "/ jscss / démoimg / wall_s1.jpg" /> </a>
<a href = "#"> <img src = "/ jscss / démoimg / wall_s2.jpg" /> </a>
<a href = "#"> <img src = "/ jscss / démoimg / wall_s3.jpg" /> </a>
<a href = "#"> <img src = "/ jscss / démoimg / wall_s4.jpg" /> </a>
<a href = "#"> <img src = "/ jscss / démoimg / wall_s5.jpg" /> </a>
<a href = "#"> <img src = "/ jscss / démoimg / wall_s6.jpg" /> </a>
</div>
<div id = "Demo2"> </div>
</div>
</div>
<cript>
<! -
Var Speed = 10;
var tab = document.getElementById ("Demo");
var tab1 = document.getElementById ("Demo1");
var tab2 = document.getElementById ("Demo2");
tab2.InnerHtml = tab1.innerHTML;
fonction Marquee () {
if (tab2.offsetwidth-tab.scrollleft <= 0)
tab.scrollleft- = tab1.offsetwidth
autre{
tab.scrollleft ++;
}
}
var mymar = setInterval (marquee, vitesse);
tab.onmouseOver = function () {ClearInterval (myMar)};
tab.onmouseout = function () {myMar = setInterval (Marquee, Speed)};
->
</cript>
</docy>
</html>