<!DOCTYPE html><html>
<head>
<!--
This carousel example is created with jQuery and the carouFredSel-plugin.
http://jquery.com
http://caroufredsel.frebsite.nl
-->
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="description" value="An automatic slideshow with an animated timer and navigational buttons (previous, next and play/pause) that allow the user to decide when to show the next image." />
<meta name="keywords" value="automatic, slideshow, slider, navigation, imagecarousel, imageviewer" />
<title>Automatic slideshow with a timer, play-, pause-, previous- and next-button</title>
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://up.agent4iranian.ir/up/agent4iranian/js/jquery.carouFredSel_5.4.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play'
},
scroll: {
fx: 'fade',
onPauseStart: function( percentage, duration ) {
$('#timer').stop().animate({
width: 600
}, {
duration: duration,
easing: 'linear'
});
},
onPauseEnd: function( percentage, duration ) {
$('#timer').stop().width( 0 );
},
onPausePause: function( percentage, duration ) {
$('#timer').stop().width( 0 );
},
onBefore: function( oldI, newI ) {
$('#timer').stop().width( 0 );
}
}
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 600px;
min-width: 990px;
background-color: #eee;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
border: 1px solid #ccc;
background-color: #fff;
width: 600px;
height: 400px;
padding: 20px;
margin: -220px 0 0 -320px;
position: absolute;
left: 50%;
top: 50%;
box-shadow: 0 5px 10px #ccc;
}
#inner {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
#carousel img {
display: block;
float: left;
}
#navi {
background-color: #333;
background-color: rgba(30, 30, 30, 0.8);
border-top: 1px solid #000;
width: 600px;
height: 70px;
position: absolute;
bottom: -60px;
left: 0;
z-index: 10;
}
#timer {
background-color: #222;
background-color: rgba(20, 20, 20, 0.8);
width: 0;
height: 70px;
position: absolute;
z-index: 20;
top: 0;
left: 0;
}
#prev, #next, #play {
display: block;
position: absolute;
z-index: 30;
}
#prev, #next {
width: 47px;
height: 47px;
top: 13px;
}
#play {
width: 53px;
height: 53px;
top: 10px;
background: url(img/ui/pause.png) 0 0 no-repeat transparent;
left: 50%;
margin-left: -27px;
}
#play.paused {
background: url(img/ui/play.png) 0 0 no-repeat transparent;
}
#prev {
background: url(img/ui/prev.png) 0 0 no-repeat transparent;
left: 220px;
}
#next {
background: url(img/ui/next.png) 0 0 no-repeat transparent;
right: 220px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="inner">
<div id="carousel">
<img src="http://moisrex.rozblog.com/user/Avatar/moisrex/sarzamindl.png" alt="rally1" width="600" height="400" border="0" />
<img src="http://moisrex.rozblog.com/user/Avatar/moisrex/Agent4iranian.jpg" alt="rally2" width="600" height="400" border="0" />
<img src="img/rally3.jpg" alt="rally3" width="600" height="400" border="0" />
<img src="img/rally4.jpg" alt="rally4" width="600" height="400" border="0" />
</div>
</div>
</div>
</body>
</html>
