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> |
Partager