Bandeau d'images défilantes
Salut à tous.
J'aimerai faire un bandeau avec des images qui défilent dedans.
J'ai trouvé :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| $(function () {
defilImg('bandeau', ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"]);
});
function defilImg(el,srcs,pas,tps) {
if(typeof el=="string") { el = document.getElementById(el); }
var tps = tps || 200;
var pas = pas || 5;
var imgs = [];
var offset = 0;
for(var i=0,l=srcs.length;i<l;i++) {
var img = new Image();
img.src = srcs[i];
imgs.push("/Images/" + img);
img.style.height=el.offsetHeight+"px";
img.style.position = "absolute";
img.style.left = offset+"px";
el.appendChild(img);
offset += img.offsetWidth;
}
var first = 0;
var last = imgs.length-1;
(function d() {
for(var i=0,l=imgs.length;i<l;i++) {
var left = parseInt(imgs[i].style.left,10);
imgs[i].style.left = (left-pas)+"px";
if(i==first && (left-pas+imgs[i].offsetWidth)<0) {
imgs[i].style.left = (parseInt(imgs[last].style.left,10)+imgs[last].offsetWidth-(i==0?pas:0))+"px";
last = first++;
if(first>imgs.length-1) { first = 0; }
}
}
setTimeout(d,tps);
})();
} |
et dans ma master:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <%@ Master Language="VB" CodeFile="Client.master.vb" Inherits="Master_Client" %>
<!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">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/Scripts/ImgDefilante.js"></script>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<div>
<div class="page">
<div class="header">
<div id="bandeau" style="position: relative; width: 500px; height: 100px; border: 1px solid black;
overflow: hidden;">
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="clear">
</div>
<br />
</div>
<div class="footer">
<asp:HyperLink ID="lnkAccueil" runat="server" NavigateUrl="~/Default.aspx">Accueil </asp:HyperLink>-
<asp:HyperLink ID="lnkMentionLeg" runat="server" NavigateUrl="~/MentionLegale.aspx">Mentions légales </asp:HyperLink>
-
<asp:HyperLink ID="lnkContact" runat="server" NavigateUrl="~/Contact.aspx">Contacts
</asp:HyperLink>
</div>
</div>
</form>
</body>
</html> |
mais rien ne se passe :cry:
