İçeriğe geç

Jquery ile sosyal medya slideri

jquery

Merhabalar bu yazımda bir önceki yazımda paylaştığım jquery sliderin daha gelişmiş ve sosyal medya haali örnek olarak facebookta resimlere tıklayıp büyüttüğünüzde arka fonun kararıp sadece resmi öne çıkaran tuşlar ile ileri geri yapabileceğiniz güzel bir slider.Dahada geliştirip kullanabilirsiniz. Dosya linki

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:#eee;}
	ul,li,a{list-style:none;text-decoration:none;margin:0px;padding:0px;}
	li.k{float:left; margin-left:10px;}
	li.k:hover{opacity:0.7;}
	img.sld {width:250px;height:200px;}
	.slider{position:absolute; }
	.kara{background-color:black;opacity:0.8;position:fixed;width:1370px;height:1200px;z-index:1;}
	.slider_b{position:relative;width:700px;height:450px;overflow:hidden; z-index:2; top:70px; 
		left:330px;display:none;}
	img.sld_b{width:700px;height:450px;display:none;}
	.left{position:absolute;z-index:2; left:1050px;top:280px;cursor:pointer;display:none;}
	.right{position:absolute;z-index:2;top:280px; left:270px;cursor:pointer;display:none;}
	.close{position:absolute;z-index:2;top:10px; left:1310px;cursor:pointer;display:none; }

</style>



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



</ul>
</div>

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



</ul>
</div>


<img class="left" src="right.png"/>
<img class="right" src="left.png"/>
<img class="close" src="close.png"/>



</body>
</html>

slider.js

$(function(){

$("li.k").click(function(){
	  son=$("li.k:last").index();
      ilk=$("li.k:first").index();


 li_deger=$(this).index();
 li_sayi=$("ul li.k").length;
$("body").prepend("<div class='kara'></div>");
$(".slider_b").show();
$("img.sld_b:eq("+li_deger+")").show();
$(".close").show();
$(".right").show();
$(".left").show();


});//li.k son


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


if (li_deger<li_sayi-1){
li_deger++;
    $("img.sld_b").hide();
	$("img.sld_b:eq("+li_deger+")").show();

}if(li_deger==ilk){
	
	$("img.sld_b:eq("+ilk+")").show();
}


});//left son



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


if (li_deger>0){
	li_deger--;
	$("img.sld_b:eq("+li_deger+")").show();

}if(li_deger==son){

	$("img.sld_b:eq("+son+")").show();
}


});//right son


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

$("img.sld_b:eq("+li_deger+")").hide();
$(".slider_b").hide();
$(".close").hide();
$(".right").hide();
$(".left").hide();
$(".kara").hide();
$(this).hide();


});//clsoe son


});//genel son

 

Tarih:Js

Bu yazı yorumlara kapalı.

Copyright © 2021 Kenan Atmaca