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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| <!DOCTYPE HTML>
<html>
<head>
<title>Slider page</title>
<!-- vous insérez la librairie Jquery -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- vous insérez la page css du slider -->
<link rel="stylesheet" type="text/css" href="slider.css">
<body>
<div id="slider_conteneur">
<ul id="slider">
<li><img src="image1.png"></li>
<li><img src="image2.png"></li>
<li><img src="image3.png"></li>
</ul>
</div>
<script type="text/javascript">
var slider = $("#slider"); var li = $("#slider li"); var next = $("#bouton_next_picture_slider"); var previous = $("#bouton_previous_picture_slider");
slider_function(li,next,previous, slider);
function slider_cercle(li,next,previous, gd,cercle){
var now_slider = 0;
var slide_time = 1000;
var delay_recall = 5;
var c = false;
li.hide();
li.eq(now_slider).show();
var loop = setInterval(function(){slider(1,c)}, delay_recall * 1000);
next.on('click', function() {
slider(1);
});
previous.on('click', function() {
slider(-1)
});
function animateOpacityIn(btn_enter){
btn_enter.animate({ opacity: 1 });
}
function animateOpacityOut(btn_leave){
btn_leave.animate({ opacity: '0.6' });
}
gd.on('mouseenter', function() {
clearInterval(loop);
$(this).css({
cursor : "pointer",
})
next.fadeIn().on('mouseenter', function(){
animateOpacityIn(next)
}).on('mouseleave', function(){
animateOpacityOut(next)
});
previous.fadeIn().on('mouseenter', function(){
animateOpacityIn(previous)
}).on('mouseleave', function(){
animateOpacityOut(previous)
});
}).on('mouseleave', function() {
loop = setInterval(function(){slider(1,c)}, delay_recall * 1000);
next.fadeOut();
previous.fadeOut();
});
function slider(direction,cer_act){
var left;
var current = now_slider;
if(direction !=2 ){
if(direction > 0){
now_slider++
left = 100;
}
else{
now_slider--
left = -100;
}
}
else{
left = -100;
if(now_slider > cer_act){
left = 100;
}
now_slider = cer_act;
}
if(now_slider > li.length - 1){
now_slider = 0;
}
else if(now_slider < 0){
now_slider = li.length - 1;
}
li.eq(current).css({
left:'0px',
}).animate({
left: -left + '%',
}, slide_time, function() {
$(this).fadeOut(3000);
});
li.eq(now_slider).css({
left: left + '%',
opacity : 0 ,
}).animate({
left: '0px',
opacity : '1',
}, slide_time).show();
}
}
</script>
</body>
</html> |
