<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">$(document).ready(function(){
var imgHeight = 61;
var imgWidth = 539;
var imagesCount = $("#slider img").length;
var autoSlideShowTime = 5000;
var correntImg = 0;
var t=setTimeout("$('#sliderNextImg').trigger('click');",autoSlideShowTime);
function showDescription() {
$("#desContent").html($("#slider ul li").slice(correntImg, correntImg+1).html());
var descriptionHeight = $("#description").height();
$('#description').animate({opacity: 0.0, height: '0px'}, 1);
$('#description').delay(1000).animate({opacity: 0.5, height: '60px'}, 500);}
showDescription();
$("#slider").hover(function() {
$("#sliderNextImg, #sliderPreviousImg").css("visibility","visible");
}, function() {
$("#sliderNextImg, #sliderPreviousImg").css("visibility","hidden");})
$("#sliderNextImg").click(function() {
clearTimeout(t)
if (correntImg != imagesCount-1) {
correntImg += 1;
$('#scroll').animate({marginTop: (-(correntImg) * imgHeight) + "px"}, 1000);
t=setTimeout("$('#sliderNextImg').trigger('click');",autoSlideShowTime);} else {
correntImg = 0;
$('#scroll').animate({marginTop: "0px"}, 2000);
t=setTimeout("$('#sliderNextImg').trigger('click');",1000+autoSlideShowTime);}
showDescription()});
$("#sliderPreviousImg").click(function() {
clearTimeout(t)
if (correntImg != 0) {
correntImg -= 1;
$('#scroll').animate({marginTop: (-(correntImg) * imgHeight) + "px"}, 1000);} else {
correntImg = imagesCount - 1;
$('#scroll').animate({marginTop: (-(correntImg) * imgHeight) + "px"}, 2000);}
t=setTimeout("$('#sliderNextImg').trigger('click');",autoSlideShowTime);
showDescription()});});</script>
<style type="text/css">
#slider {
position:relative;
margin: 0 auto;
height:61px;
width:539px;
border:0px #8D8C8D solid;
background-color:;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px;
}
#ImgsWrapper {
position:relative;
height:61px;
width:539px;
margin:0 0px;
top:0px;
overflow:hidden;
}
#description {
position:absolute;
background-color:transparent;
width:100%;
bottom:0;
color:white;
text-align:right;
font-size:1em;
font-weight:bold;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#description #desContent {
margin:10px;
}
#slider a {
display:block;
height:61px;
width:539px;
}
#slider img {
border:0;
}
#slider #sliderNextImg, #slider #sliderPreviousImg {
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
#slider #sliderNextImg, #slider #sliderPreviousImg {
position:absolute;
background-color:white;
text-align:center;
height:24px;
width:50px;
top:50%;
margin-top:-12px;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color:black;
cursor:pointer;
padding-top:5px;
visibility:hidden;
z-index:9999;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
#slider #sliderNextImg {
left:5px;
}
#slider #sliderPreviousImg {
right:5px;
}
#slider #sliderNextImg:hover, #slider #sliderPreviousImg:hover {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
#slider ul {
display:none;
}
</style>
</head>
<body>
<div id="slider">
<div id="sliderNextImg">التالي</div>
<div id="sliderPreviousImg">السابق</div>
<div id="ImgsWrapper">
<div id="description"><div id="desContent"></div></div>
<div id="scroll">
<!-- الكود الخاص بالبنرات -->
<img src="http://i49.servimg.com/u/f49/17/49/19/61/112.png" />
<img src="http://i49.servimg.com/u/f49/17/49/19/61/212.png" />
<img src="http://i49.servimg.com/u/f49/17/49/19/61/311.png" />
<img src="http://i49.servimg.com/u/f49/17/49/19/61/410.png" />
<!-- الكود الخاص بالبنرات -->
</div></div></div>
[/spoiler]
Facebook
Twitter
Youtube
