JQUERY SLİDER YAPIMI
Codu:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var Slider=0;
$.Slider= function(toplam){
$( "#slider ul#buton li").removeClass();
$("#slider ul#resim li").hide();
if(Slider < toplam-1 ){
Slider++;
$( "#slider ul#buton li").eq(Slider).addClass("aktif");
$("#slider ul#resim li").eq(Slider).show();
}else{
$( "#slider ul#buton li:first").addClass("aktif");
$("#slider ul#resim li:first").show();
Slider=0;
}
}
var Toplamli=$("#slider ul#resim li").length;
var interval=setInterval('$.Slider('+Toplamli+')', 2000);
$("#slider").hover(function (){
clearInterval(interval);
}, function (){
interval=setInterval('$.Slider('+Toplamli+')', 2000);
}
);
$( "#slider ul#buton li:first" ).addClass( "aktif" );
$("#slider ul#resim li ").hide();
$("#slider ul#resim li:first ").show();
$( "#slider ul#buton li").click(function(){
var indis = $(this).index();
$("#slider ul#resim li").hide();
$("#slider ul#resim li").eq(indis).show(100);
$( "#slider ul#buton li").removeClass();
$( "#slider ul#buton li").eq(indis).addClass("aktif");
Slider = indis;
});
Slider = indis;
return false
});
</script>
<style>
body{
font-size:12px;
font-family:Arial;
margin:auto;
}
a{text-decoration:none;}
ul,li{padding:0;margin:0;list-style:none;}
#slider{overflow:hidden;
width:600px; height:250px;
margin:20px auto;
position:relative;
}
#slider ul#resim li a img { width:600px; height:250px;}
#slider ul#buton { position:absolute; bottom:5px; left:5px; }
#slider ul#buton li{float:left; margin-left:5px;}
#slider ul#buton li a{display:block; padding: 6px 5px; color:black;}
#slider ul#buton li.aktif a {background-color:red; border-radius:20px; }
</style>
</head>
<body>
<center>
<div id="slider">
<ul id="resim">
<li><a href="#"><img src="a.png"></a></li>
<li><a href="#"><img src="b.jpg"></a></li>
<li><a href="#"><img src="a.png"></a></li>
<li><a href="#"><img src="b.jpg"></a></li>
</ul>
<ul id="buton">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</center>
</body>
</html>
Yorumlar
Yorum Gönder