İçeriğe geç

Jqeury ile slider yapımı

jquery

Merhabalar bu yazımda jquery ile haber sitelerinde gördüğünüz basit bir slider örneği paylaşacağım kodu aşağıda inceleyebilirsiniz tüm dosyayıda buradan indirebilirsiniz.

home.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="slider.js"></script>
</head>
<body>
<style type="text/css">
	body{margin:0px; padding:0px; background-color:#fed;}
	ul,li,a{list-style:none;text-decoration:none;margin:0px;padding:0px;}
	img {width:400px;height:300px;}
	.slider{width:400px;height:300px; overflow:hidden;position:relative; margin-left:50px; margin-top:50px;}
	.sayac{position:absolute; color:white; bottom:10px;right:10px;}
	a{display:block; background-color:white; color:black; float:left; padding:2px; margin:2px;}
    a:hover,a.aktiv{background-color:red; color:white;}
</style>


<div class="slider">
<ul>
	<li>
		<img src='1.jpg' alt=''/>
	</li>
	<li>
		<img src='2.jpg' alt=''/>
	</li>
	<li>
		<img src='3.jpg' alt=''/>
	</li>
	<li>
		<img src='4.jpg' alt=''/>
	</li>
	<li>
		<img src='5.jpg' alt=''/>
	</li>
	<li>
		<img src='6.jpg' alt=''/>
	</li>

<div class="sayac">
	<a href="#">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
	<a href="#">4</a>
	<a href="#">5</a>
	<a href="#">6</a>
</div>


</ul>
</div>
</body>
</html>

slider.js

$(function(){

$("a:first").addClass("aktiv");
$("ul li").hide();
$("ul li:first").show();


$("a").click(function(){

var indis =$(this).index();
$("ul li").hide();
$("ul li:eq("+indis+")").fadeIn(1000);
$("a").removeClass("aktiv");
$(this).addClass("aktiv");


});

});

 

Tarih:Js

Bu yazı yorumlara kapalı.

Copyright © 2020 Kenan Atmaca