<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> jQuery Slider </title>
<style type="text/css">
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(img/6.gif);
background-repeat:no-repeat;
background-position:center;
}
.shadow{
background-image: url(img/hello);
background-repeat:no-repeat;
background-position:top;
width:864px;
height:100px;
margin:-100px auto;
}
.slider img{
width:800px;
height:350px;
display:none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function slider(){
$(".slider#1").show("fade",500);
$(".slider#3").delay(5500). hide("slide",{direction:'left'},500);
var sc = $(".sliderimg").size();
var count = 2;
setInterval(function(){
$(".slider#" count).show("slide",{direction:"right"},500);
$(".slider#" count).delay(5500). hide("slide",{direction:"left"},500);
if(count==sc){
count = 1;
}else{
count = count 1;
}
},6500);
}
</script>
</head>
<body onload="slider();">
<div class="slider">
<img id="1" src="img/hello.jpg" border="0" alt="hello" />
<img id="2" src="img/sir.jpg" border="0" alt="sir" />
<img id="3" src="img/dictator.jpg" border="0" alt="dictator" />
</div>
<div class="shadow"></div>
</body>
</html>